48

编辑：哇。这个问题现在已经 12 岁了。

正如有人所说，自 2016 年以来可以使用单线完成：https ://stackoverflow.com/a/69322509/80907

原本的：

我想知道是否有一种方法可以在不使用 innerHTML 的情况下更改 HTML 中任何内容的文本。

我问的原因是因为它有点被 W3C 反对。我知道这是吹毛求疵，但我只想知道，有没有办法？

编辑：人们似乎误解了我在这里问的内容：我想找到一种方法来有效地更改正在显示的文本。

如果我有：

<div id="one">One</a>

innerHTML 允许我这样做：

var text = document.getElementsById("one");
text.innerHTML = "Two";

我屏幕上的文字也会改变。
我不希望追加更多文本，我希望更改已经存在的文本。

4

13 回答 13

46

推荐的方法是通过 DOM 操作，但它可能非常冗长。例如：

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

编辑

为了响应您的编辑，为了替换当前内容，您只需删除现有内容，然后使用上面的代码填充新内容。例如：

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

但正如其他人所说，我建议改用 jQuery 之类的东西，因为并非所有浏览器都完全支持 DOM，而且那些确实有由 JavaScript 库在内部处理的怪癖。例如，jQuery 看起来像这样：

$('#someID').html("<p>Hello, <b>World</b>!</p>");
于 2009-04-05T00:20:32.303 回答
14

更好的方法是使用document.createTextNode. 使用此函数而不是的主要原因之一innerHTML是所有 HTML 字符转义都会为您处理，而如果您只是设置innerHTML.

于 2009-04-05T00:17:49.313 回答
9

您可以通过操作 DOM 来获得相同的效果。更改文本最安全的方法是删除元素的所有子节点并用新的文本节点替换它们。

var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

删除子节点会删除元素的文本内容，然后再将其替换为新文本。

大多数开发人员避免使用 innerHTML 的原因是通过 DOM 访问元素是符合标准的。

于 2009-04-05T03:30:00.663 回答
7

如果您只想更改纯文本，那么有一个更快的解决方案，它依赖于标准：

document.getElementById("one").firstChild.data = "two";

无论如何，请注意，innerHTML 将成为即将到来的 HTML 5 标准的一部分。

于 2009-04-05T17:25:43.057 回答
5

简单的。

替换text.innerHTML = 'two'为text.firstChild.nodeValue = 'two'。

于 2010-11-28T12:07:39.710 回答
5

也在寻找绕过的好方法，element.innerHTML我终于找到了解决方案：

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString('<template>'+html+'</template>', 'text/html').head;
    this.appendChild(dom.firstElementChild.content);
}

//-- document.getElementById('my-id').innerHTML = string_of_html;
document.getElementById('my-id').htmlContent(string_of_html);

另一种没有 <template> 标记的替代方案，而是循环：

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString(html, 'text/html').body;
    while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}

请记住，当innerHTML“替换”内容时，此方法实际上是“添加”内容......

这可能会有所帮助：

HTMLElement.prototype.clearContent = function()
{
    while (this.hasChildNodes()) this.removeChild(this.lastChild);
}

//-- document.getElementById('my-id').innerHTML = '';
document.getElementById('my-id').clearContent();

文档：https ://github.com/swannty/escaping-innerHTML 性能： https
://jsperf.com/escaping-innerhtml

于 2017-03-07T21:18:59.777 回答
3 
var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

这对您来说可能与 innerHTML 一样令人反感，但它具有在某些情况下（IE）工作的优势，其中 innerHTML 或 appendChild 不能，如某些表格节点、样式和脚本元素的文本以及表单字段的值

于 2009-04-06T14:08:04.897 回答
2

insertAdjacentHTML() 是要走的路。阅读更多： 点击获取文档

于 2019-02-08T19:55:58.207 回答
2

这是一个非常古老的问题。

现在，情况发生了变化：

element.innerText = "Hi There!"

单线。自 2016 年以来，每个浏览器都支持这一点。

于 2021-09-25T01:38:48.153 回答
1

您可以按如下方式使用 DOM：

<html>
<body>
<div>before</div>
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.firstChild.nodeValue);
element.removeChild(element.firstChild);
element.appendChild(document.createTextNode('after'));
alert(element.firstChild.nodeValue);
</script>
</body>

但我认为很少有人这样做，而是使用jQuery或Prototype之类的框架或任何其他 javascript 框架。这是jQuery示例：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div>before</div>
<script type="text/javascript">
var element = $("div");
alert(element.text());
element.text("after");
alert(element.text());
</script>
</body>
于 2009-04-05T00:23:32.577 回答
1

在我看来，CSS+HTML+JS 组合应该达到预期的效果：

.myelement:before {   
    content: attr(alt);
} 

...

<span class='myelement' alt='initial value'></span> 

...

element.setAttribute('alt', 'new value');

有谁知道这在实践中是否有效？

于 2009-06-16T10:02:48.540 回答
1

好吧，如果我正确理解了您的问题，这应该是一个答案。

var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";
于 2011-09-24T07:54:02.783 回答
0

如果我要定期更新它，我有时会发现存储对文本节点的直接引用很有帮助。我做这样的事情：

var dynamicText = myDiv.appendChild(document.createTextNode("the initial text"));

然后每当我需要更新它时，我都会这样做：

dynamicText.nodeValue = "the updated text";

这可以避免必须遍历 DOM 或添加或删除任何子项。

于 2013-10-10T13:18:44.460 回答