Question

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

我问的原因是因为W3C对它有点不满意。我知道这是挑剔，但我只是想知道，有办法吗？

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

如果我有：

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

innerHTML允许我这样做：

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

我屏幕上的文字会发生变化我不想附加更多文字，我希望改变现有文本。

Answer 1

推荐的方法是通过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>");

Answer 2

更好的方法是使用document.createTextNode。使用此函数而不是innerHTML的一个主要原因是，所有HTML字符转义都将为您处理，而如果您只是设置innerHTML，则必须自己转义字符串。< / p>

Answer 3

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

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

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

在将子节点替换为新文本之前，删除子节点会删除元素的文本内容。

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

Answer 4

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

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

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

Answer 5

简单。

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

Answer 6

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不像某些表节点那样处理样式和脚本元素的文本以及表单的值字段

Answer 7

您可以按如下方式使用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之类的框架或there之外的任何其他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>

Answer 8

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

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

...

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

...

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

有人知道这是否有效？

Answer 9

我理解你的问题，这应该是一个答案。

var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";

Answer 10

同时寻找绕过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);

另一种没有＆lt; template＆gt;的替代方案标签，但改为循环：

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();

doc：https://github.com/swannty/escaping-innerHTML
perf：https://jsperf.com/escaping-innerhtml

Answer 11

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

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

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

dynamicText.nodeValue = "the updated text";

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

Answer 12

insertAdjacentHTML（）是必经之路。阅读更多： Click for documentation

innerHTML的替代方案？

12 个答案: