JavaScript-js 动态创建多个元素如何避免多次追加到节点的操作?

WP主题Bug提交 WP主题Bug提交 主题:1067 回复:2226

JavaScript-js 动态创建多个元素如何避免多次追加到节点的操作?

虐人心 发布于 2017-09-12 字数 212 浏览 1197 回复 4

例如:

html:

<ul id='appendTest'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(4

晚风撩人 2017-10-07 4 楼

我更倾向于,先组成字符串, 然后innerHTML加上

泛泛之交 2017-09-16 3 楼

写一个li里面content的最后一个数的常量,比如是3,就写3
var val=3;
然后把其中的一个li作为模板,每次追加,就clone一个,然后把里面的内容换为++val,直接append到ul里去,就不需要在写循环了。
删除类似,直接通过this作为参数,remove掉完事,remove之前对比下内容是不是等于val,如果等于就val--;

浮生未歇 2017-09-14 2 楼

试试看生成一个string,拼接起来最后在追加到ul节点里面

清晨说ぺ晚安 2017-09-13 1 楼

还是我自己回答下这个问题吧,这个问题可以使用 createDocumentFragment() 来创建文档碎片,然后将这个追加到ul下即可,这种方式主要解决多次对dom节点操作的问题,来提高效率。

  var contents =["li_1","li_2","li_3","li_4","li_5","li_6","li_7","li_8","li_9","li_10"];
var ul = document.getElementById('appendTest');
var fragment = document.createDocumentFragment();
for(var i=0;i<contents.length;i++){
var li =document.createElement("li");
var liText =document.createTextNode(contents[i]);
li.appendChild(liText);
fragment.appendChild(li);
}
ul.appendChild(fragment); //只操作页面元素一次。减少dom的更新