微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JavaScript:将元素追加到元素

以下哪种技术从用户体验中更好?

在这两个例子中,假设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 方法是简单的.<="" iv="">

转载注明原文:JavaScript:将元素追加到元素 - 代码日志

原文地址:https://www.jb51.cc/js/150431.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐