2-2关于创建dom节点
来源：2-2 create系列创建节点的方法
田马达加斯加
2018-11-08 17:33:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建dom节点</title>
</head>
<style type="text/css"></style>
<script type="text/javascript" src="domReady.js"></script>
<script type="text/javascript">
myReady(function(){
// var li=document.createElement('li');
// var text=document.createTextNode('Item');
// li.appendChild(text);
// var list=document.getElementById('list');
// list.appendChild(li);
/*方法一：
var list=document.getElementById('list');
for(var i=0;i<3;i++){
var li=document.createElement('li');
var text=document.createTextNode('Item '+(i+1));
li.appendChild(text);
list.appendChild(li);
}*/
//方法二：
var list=document.getElementById('list');
var frag=document.createDocumentFragment();
for(var i=0;i<3;i++){
var li=document.createElement('li');
var text=document.createTextNode('Item '+(i+1));
li.appendChild(text);
frag.appendChild(li);
}
list.appendChild(frag);
});
</script>
<body>
<ul id="list"></ul>
</body>
</html>
方法二和方法一实现的效果一样，但有什么区别呢，为什么要创建一个文本片段。
1回答
-
两种方法都可以实现，但是在代码性能上创建文档片段会更优化些。如果只添加几条数据用第一种方式或者是第二种方式都是可以的，但是如果要插入大量数据，直接for循环数据会比较缓慢，一条一条的出现，但是使用文档片段来完成，循环之后，会将整个文档片段添加到页面中。
祝学习愉快！
0
相似问题