通过 DOM 将文本添加到 JavaScript 中的现有文本元素

问题描述 投票：0回答：8

我正在尝试弄清楚如何将文本添加到已经具有文本节点的 

p
标签或 
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
不是函数。大多数帮助页面首先创建一个 
p
标签，然后附加文本。

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

PS：我之前使用过

innerHTML
来执行此操作，但出于学习目的，我想在这里避免使用它。

javascript dom
8个回答
106
投票

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>

27
投票

您可以这样做，而不是附加元素。

 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>

7
投票

方法

.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+ 中受支持

5
投票

这个呢。 

var p = document.getElementById("p")
p.innerText = p.innerText+" And this is addon."
<p id ="p">This is some text</p>

4
投票

从 

.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>

1
投票
   <!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>
0
投票

element.textContent = '你的文本' element.innerHTML = '您的文本'

-5
投票

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.