为什么“element.innerHTML=”是错误的代码？

我被告知不要使用附加内容element.innerHTML += ...像这样：

var str = "<div>hello world</div>";
var elm = document.getElementById("targetID");

elm.innerHTML += str; //not a good idea?

这是什么问题？我还有什么其他选择？

每次innerHTML设置后，必须解析 HTML、构造 DOM 并将其插入到文档中。这需要时间。

例如，如果elm.innerHTML有数千个 div、表格、列表、图像等，然后调用.innerHTML += ...会导致解析器重新解析所有这些东西再次。这也可能会破坏对已构建的 DOM 元素的引用并导致其他混乱。实际上，您所需要做的就是在末尾添加一个新元素。

最好直接打电话appendChild:

var newElement = document.createElement('div');
newElement.innerHTML = '<div>Hello World!</div>';
elm.appendChild(newElement);​​​​​​​​​​​​​​​​

这样，现有的内容elm不再解析。

NOTE:[某些]浏览器可能足够聪明来优化+=运算符而不重新解析现有内容。我没有研究过这个。