•  23-08-2019
  •  | 
  •  

题

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

我问这个问题的原因是因为 W3C 对此有点不满。我知道这很挑剔，但我只是想知道，有什么办法吗？

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

如果我有：

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

innerHTML 允许我这样做：

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

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

有帮助吗？

解决方案

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

其他提示

做的较好的方法是使用 document.createTextNode 。其中一个主要的原因，使用此功能，而不是innerHTML是所有的HTML字符转义会照顾你，而你就必须自己逃脱你的字符串，如果你简单地设置innerHTML。

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

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

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

删除子节点用新的文本替换它之前摆脱你的元素的文本内容。

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

如果你只希望更改纯文本，然后有一个更快的解决方案，它依赖于标准：

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

总之，请注意，innerHTML的将是即将到来的HTML 5标准的一部分。

简单。

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

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不工作，像一些表的节点的优势，风格和脚本元素的文本和表格的值字段

您可以按如下方式使用 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 或者 原型 或任何其他 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>

这似乎我，CSS + HTML + JS组合应达到所需的效果：

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

...

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

...

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

有谁知道这是否正常工作在实践中？

好I F我明白你的问题正确的，这应该是一个答案。

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

另外寻找一个很好的替代旁路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);

，而不另一种替代<模板>标记，但代替循环：

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

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

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

然后每当我需要更新它，我只是这样做：

dynamicText.nodeValue = "the updated text";

此防止具有走DOM或添加或移除任何的儿童。

insertAdjacentHTML（）是去的方式。阅读更多： 点击查看文档

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top