Question

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

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

此代码给出错误appendChild不是函数。大多数帮助页面首先创建一个p标签，然后附加文本。

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

PS：我之前使用过innerHTML，但出于学习目的，我想在这里避免使用它。

Answer 1

appendChild不是函数的原因是因为您在textContent元素的p上执行它。

您只需选择段落本身，然后将新文本节点追加到：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，如果您愿意，可以只修改文本本身（而不是添加新节点）：

＆＃13;

var paragraph = document.getElementById("p");

paragraph.textContent += "This just got added";

＆＃13;

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

＆＃13;

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

从.textContent

中删除var t = document.getElementById("p").textContent;

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

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

Answer 4

这个怎么样？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

   <!DOCTYPE html>
   <html>
   <head>
   <script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
   $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
   });

  });
 </script>
  </head>
 <body>

 <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>



 <button id="btn1">Append text</button>


</body>
</html>

Answer 6

方法.appendChild()用于添加新元素，不向现有元素添加文字。

示例：

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

参考：Mozilla Developer Network

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

示例：

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

参考：Mozilla Developer Network

以下仅在IE 9 +
中支持

Answer 7

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>

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

7 个答案: