关于请问document.createDocumentFragment( )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>create创建新的节点（综合创建方法）</title>
</head>
<body>
<ul id="myList"></ul>
<script>
//综合创建方法：
//第一步，获取ul对象
var ul=document.getElementById("myList");
//创建变量li，初始值为null
var li=null;
//创建变量con，用来接收需要创建的文本节点
var con=null;
//通过for循环来创建三个li标签
for (var i = 0; i < 3; i++) {
//通过document.createElement()方法创建节点，并赋值给变量li
li=document.createElement("li");
//通过document.createTextNode()方法创建文本节点，并赋值给变量con
con=document.createTextNode("这是li"+(i+1));
//将创建好的文本节点添加到li标签中
li.appendChild(con);
//最后包含文本内容的li标签添加到ul标签中
ul.appendChild(li);
}
</script>
</body>
</html>
我根据视频中老师讲的内容梳理了一下，如果不使用document.createDocumentFragment( )这个方法，而是直接将li标签添加到ul中，依然可以实现效果，那么document.createDocumentFragment( )意义又何在呢？什么情况下适合用到这个方法呢？
6
收起
正在回答
1回答
同学你好，使用文档片段通常会带来更好的性能。
1、关于这段代码：使用循环将li先装填到fragment代码片段中，最后再将代码片段装填到ul中，页面结构只会改变一次。因此，使用文档片段通常会带来更好的性能。
2、通俗的来讲就好比搬砖，一块砖就要跑一趟，不如多块砖装筐一起运。也就是先装到文档片段再一起装到DOM树中比每一次都直接装到DOM树中的成本低。
3、而用处就是创建一个新的空白的文档片段，将其添加到文档树中。跟同学实现的功能是一样的，只不过实现方法不一样而已。
希望我的回答能够帮助到你，望采纳，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星