如何使用 JavaScript 在 HTML 文档中插入文本？
Posted
技术标签:
【中文标题】如何使用 JavaScript 在 HTML 文档中插入文本？【英文标题】：How to insert text in an HTML document using JavaScript? 【发布时间】：2013-05-28 13:49:25 【问题描述】：我想用字符串 "saying" 替换 span 元素为 id "randMsg"。这是我现在拥有的：
document.getElementById('randMsg').write(saying);
有什么想法吗？我是 javascript 菜鸟，我做错了什么？
【问题讨论】：
.write() 是使用错误的函数。试试document.getElementById('...').innerhtml = ...
我假设你想设置跨度的文本。试试这个document.getElementById('randMsg').innerHTML("saying");
重复？ innerHTML without the html, just text（我认为这个问题与获取值有关，而不是设置它。）
@PSL 您将 DOM 与 jQuery 混淆了。你的意思是$('#randMsg').innerHTML("saying"); 还是类似的？
【参考方案1】：
您可以使用textContent 属性来更新元素内的文本：
document.getElementById("randMsg").textContent = "Replaced Content";
http://jsfiddle.net/RaGng/
或者如果你需要它在IE8及以下工作，你可以检测对textContent的支持，如果不支持，你可以使用非标准的innerText来代替：
var el = document.getElementById("randMsg"),
msg = "Replaced Content";
("textContent" in el) ? el.textContent = msg : el.innerText = msg;
http://jsfiddle.net/RaGng/4/
【讨论】：
看看对textContent的支持developer.mozilla.org/en-US/docs/Web/API/Node.textContent @PSL 有现代浏览器，当前浏览器 aaaaannnnd IE 一如既往地在后面。 很公平，但是你可以使用“in”来检测是否支持，如果不支持则使用innerText：jsfiddle.net/RaGng/3【参考方案2】：以下W3C DOM code适用于所有主流浏览器，包括IE8及更早版本。
var node = document.getElementById('randMsg');
var textToUse = 'Hello, World!';
// Remove all the children of the node.
while (node.hasChildNodes())
node.removeChild(node.firstChild);
// Now add the text.
node.appendChild(document.createTextNode(textToUse));
Working JsFiddle here.
您也可以使用innerText，但 Firefox 不支持：
node.innerText = textToUse;
或者，您可以使用textContent，但是，IE 版本 8 和旧版不支持：
node.textContent = textToUse;
Quirksmode 对以上所有内容都维护得非常好browser compatibility tables。
【讨论】：
【参考方案3】：Working jsFiddle Demo
您必须设置元素的innerHTML 属性。考虑以下标记：
<span id="randMsg"></span>
在你的 JS 代码中：
var saying = 'Say Hello World';
document.getElementById('randMsg').innerHTML = saying;
你的结果是：
<span id="randMsg">Say Hello World</span>
注意
别忘了在你的元素之后添加这个脚本（或等待 DOM 准备好）：
<body>
<span id="randMsg"></span>
<script>
var saying = 'Say Hello World';
document.getElementById('randMsg').innerHTML = saying;
</script>
</body>
【讨论】：
如果文本包含< 或& 等字符，innerHTML 可能无法正常工作。听起来你想要innerText，它将接受字符串作为文本，但当然缺少 Firefox 支持。以上是关于如何使用 JavaScript 在 HTML 文档中插入文本？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 检测文档中是不是存在 HTML5 有效的文档类型？
如何将 javascript 函数从子 flash swf 文件插入 HTML 文档？
如何使用 for 循环将一段重复的 javascript 打印到 HTML 文档？
如何在 JavaScript 中使用 Mongoose 动态更新文档？