JavaScript:将子项附加到元素

Question

从用户体验来看，以下哪种技术更好？

在这两个示例中，假设 thumbContainer 设置为 document.getElementById('thumbContainer') 和 new Thumbnail(thumb) 的返回值。 toXMLString() 返回一个带有 XHTML 标记的字符串。

A) 只需 += 和 thumbContainer.innerHTML:

for (thumb in thumbnails) {
    thumbContainer.innerHTML += new Thumbnail(thumb).toXMLString();
} 

B) 或者将 new Thumbnail(thumb).toXMLString() 转换为 DOM 元素并使用 appendChild？

for (thumb in thumbnails) {
    var shell = document.createElement('div');
    shell.innerHTML = new Thumbnail(thumb).toXMLString();
    for (i = 0; i < shell.childElementCount; i++) {
        thumbContainer.appendChild(shell.children[i]);
    }
}

我已经使用了两者，但 Firefox 提示我有一个长时间运行的脚本，我要停止它吗？

哪个循环不那么紧密，允许 UI 在新元素添加到 DOM 时更新？

Answer 1

A) Simply += with thumbContainer.innerHTML

永远不要这样做。这必须将所有内容序列化为 HTML，向其中添加一个字符串，然后将其全部解析回来。它很慢(在循环中执行它尤其是坏消息)并且它会丢失所有 JavaScript 引用、事件处理程序等.

IE 的 insertAdjacentHTML会更有效地做到这一点。它也是 HTML5 的一部分，但尚未在其他地方广泛实现。

using appendChild?

是的，没关系。如果您有很多的经验，它会开始变慢(但不像每次都重新解析 innerHTML 那样糟糕)。使 DocumentFragment 一次将多个元素插入到容器子节点列表中在某些情况下会有所帮助。将 DocumentFragment 与 Range 结合起来可以做更多的事情，但由于 IE 的 Range 实现是如此 StRange，因此更难以兼容地编写。

无论哪种方式，既然您似乎没有对各个 shell 节点做任何事情，为什么不在解析之前简单地将所有缩略图 HTML 字符串连接在一起呢？

for (var child in shell.childNodes) {

不要使用 for..in在序列类型上，它不会按照您的想法进行。它仅适用于 Object用作映射。遍历 Array 或 NodeList 的正确方法很简单 for (var i= 0; i<sequence.length; i++) .