Javascript 通过DOM向javascript中的现有文本元素添加文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41764061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding text to an existing text element in javascript via DOM
提问by Benny Thadikaran
I am trying to figure how to add text to a p tag or h1 tag that already has a text node.
我想弄清楚如何将文本添加到已经有文本节点的 ap 标签或 h1 标签。
For example:
例如：
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>This code gives an error appendChild is not a function. Most of the help pages first create a p tag and then append the text.
这段代码给出了一个错误 appendChild is not a function。大多数帮助页面首先创建 ap 标签，然后附加文本。
What is the right way to add text to an existing text element?
将文本添加到现有文本元素的正确方法是什么？
PS: I've used innerHTML before to do this, but for learning purposes i want to avoid it here.
PS：我之前使用过innerHTML来做这件事，但出于学习目的，我想在这里避免它。
回答by James Monger
The reason that appendChildis not a function is because you're executing it on the textContentof your pelement.
其原因appendChild是没有一个功能是因为你执行它在textContent你的p元素。
You instead just need to select the paragraph itself, and then append your new text node to that:
相反，您只需要选择段落本身，然后将新文本节点附加到：
var paragraph = document.getElementById("p");
var text = document.createTextNode("This just got added");
paragraph.appendChild(text);<p id="p">This is some text</p>However instead, if you like, you can just modify the text itself (rather than adding a new node):
但是，如果您愿意，您可以只修改文本本身（而不是添加新节点）：
var paragraph = document.getElementById("p");
paragraph.textContent += "This just got added";<p id="p">This is some text</p>回答by Deep
Instead of appending element you can just do.
而不是附加元素，你可以做。
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>回答by Donii Hoho
What about this.
那这个呢。
var p = document.getElementById("p")
p.innerText = p.innerText+" And this is addon."<p id ="p">This is some text</p>回答by Arkej
remove .textContentfrom var t = document.getElementById("p").textContent;
除去.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>回答by Frederick M. Rogers
The method .appendChild()is used to add a new elementNOT add text to an existing element.
该方法.appendChild()用于添加新元素，而不是向现有元素添加文本。
Example:
例子：
var p = document.createElement("p");
document.body.appendChild(p);
Reference: Mozilla Developer Network
The standard approach for this is using .innerHTML(). But if you want a alternate solution you could try using element.textContent.
对此的标准方法是使用.innerHTML(). 但是如果你想要一个替代解决方案，你可以尝试使用element.textContent.
Example:
例子：
document.getElementById("foo").textContent = "This is som text";
Reference: Mozilla Developer Network
How ever this is only supported in IE 9+
如何这仅在 IE 9+ 中受支持
回答by Kaushar Alam
<!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>
