通过DOM在javascript中向现有文本元素添加文本

Question

我试图想象如何将文本添加到已经有文本节点的ap标签或h1标签.

例如:

var t = document.getElementById("p").textContent;
var y = document.createTextNode("This just got added");

t.appendChild(y);

<p id="p">This is some text</p>

此代码给出错误appendChild不是函数.大多数帮助页面首先创建ap标签,然后附加文本.

将文本添加到现有文本元素的正确方法是什么？

PS:我之前使用过innerHTML,但出于学习目的,我想在这里避免使用它.

Answer 1

其原因appendChild是没有一个功能是因为你执行它在textContent你的p元素.

您只需要选择段落本身,然后将新文本节点追加到:

var paragraph = document.getElementById("p");
var text = document.createTextNode("This just got added");

paragraph.appendChild(text);

<p id="p">This is some text</p>

但是,如果您愿意,可以只修改文本本身(而不是添加新节点):

var paragraph = document.getElementById("p");

paragraph.textContent += "This just got added";

<p id="p">This is some text</p>

Answer 2

你可以做的不是追加元素.

 document.getElementById("p").textContent += " this has just been added";

document.getElementById("p").textContent += " this has just been added";

<p id ="p">This is some text</p>

Answer 3

该方法.appendChild()用于添加新元素而不是向现有元素添加文本。

例子：

var p = document.createElement("p");
document.body.appendChild(p);

参考：Mozilla 开发者网络

标准方法是使用.innerHTML(). 但如果您想要替代解决方案，您可以尝试使用element.textContent.

例子：

document.getElementById("foo").textContent = "This is som text";

参考：Mozilla 开发者网络

然而这仅在 IE 9+ 中受支持

Answer 4

那这个呢。

var p = document.getElementById("p")
p.innerText = p.innerText+" And this is addon."

<p id ="p">This is some text</p>