如何在不删除标签内的整个 html 的情况下使用 innerHTML？答案

【问题标题】：How can I use innerHTML without removing entire html inside of tag?如何在不删除标签内的整个 html 的情况下使用 innerHTML？
【发布时间】：2013-06-07 14:32:07
【问题描述】：

我几乎搜索了整个互联网，但无法找到有关此的解决方案..

假设我们有一个 div 元素，其中包含一些 html。通过其 id（或其他选择器，等等）选择此标签后，如果我使用“innerHTML”方法，我会丢失标签内的所有 html。我该怎么做才能不破坏标签内的 html 部分？我只想添加一些“更多”的东西，而不是“破坏所有”，然后将一些东西插入新的。

document.getElementById('something').innerHTML = document.getElementById('something').innerHTML + new_html_to_append;

上面的方法不适用于第 3 次迭代，或者在 for 循环中，所以它对我没用.. 我需要一些适合无限补充的东西。

谢谢！

（我知道 .append() 方法，但我不能在那里使用 JQuery。）

【问题讨论】：

显示你的循环代码不起作用。你贴的sn-p应该没有问题，可能是你的循环逻辑出了什么问题...
document.getElementById('something').innerHTML += new_html_to_append;?或者确实appendChild毕竟是纯javascript - developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
你可以使用纯JS appendChild
所以使用 dom 方法 appendChild！ :)
请分享您的代码，以便我们看到您使用的循环

标签： javascript innerhtml

【解决方案1】：

使用innerHTML() 可能会导致一些意外行为。从这里查看appendChild() 之类的替代方案：

How to append data to div using javascript?

【讨论】：

【解决方案2】：

使用 AppendChild() 。在使用此函数时，请注意使用正确的函数，例如是否必须添加 HTML 元素，如 div。然后使用

obj=document.createElement(something);
document.getElementById("something").appendChild(obj);

但如果它是一个文本节点，那么

obj=document.createTextNode(something);
document.getElementById("something").appendChild(obj);

【讨论】：

该项目的所有开发人员都在代码中添加了一些新的东西，这些年我数不清了，现在一团糟。我不能在这里复制整个代码，因为它包含很多节点，包括一个旧的 ajax 引擎，有些部分只能在服务器中工作，等等。长话短说，一团糟。顺便说一句，appendChild 现在可以使用，谢谢！
所以你的意思是你不知道这个东西是元素还是文本，对吧？

【解决方案3】：

appendChild()

.......................

【讨论】：