在这两个例子中,假设thumbContainer设置为document.getElementById(‘thumbContainer’)的返回值,而新的Thumbnail(thumb).toXMLString()返回一个带有XHTML标记的字符串.
A)Simply = with thumbContainer.innerHTML：
for (thumb in thumbnails) {
thumbContainer.innerHTML += new Thumbnail(thumb).toXMLString();
}
B)还是将新的缩略图(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？
解决方法
A) Simply += with thumbContainer.innerHTML
永远不要这样做这必须将所有的内容连接到HTML,为它添加一个字符串,并将其全部解析.它很慢(在一个循环中执行它是特别坏消息),它会丢失所有的JavaScript引用,事件处理程序等.
IE的insertAdjacentHTML将会更有效地执行此操作.它也是HTML5的一部分,但其他地方尚未广泛实施.
using appendChild?
是的,没关系.如果你有很多的拇指,它将开始缓慢(但不像每次重新打印innerHTML那样糟糕).在一些情况下,使DocumentFragment可以将多个元素同时插入到容器子节点列表中.将DocumentFragment与Range相结合可以做得更多,但是由于IE的Range实现是如此StRange,因此更容易写入兼容性.
无论哪种方式,由于您似乎并没有对单个shell节点做任何事情,为什么不在解析前简单地加入所有thumbernail HTML字符串？
for (var child in shell.childNodes) {
不要在序列类型中使用,它不会做你的想法.它仅用于对象用作映射. (var i = 0; i
相关文章
转载注明原文：JavaScript：将元素追加到元素 - 代码日志