innerHTML的替代方案？

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.

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

也在寻找绕过的好选择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

Answer 7

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

现在，事情发生了变化：

element.innerText = "Hi There!"

一条单行线。自 2016 年以来，每个浏览器都支持此功能。