插入节点
我们想要插入单个节点的时候可以使用insertBefore()和appendChild()方法，如果我们想要插入多个内容的话，就需要使用DocumentFragment。不停的循环使用插入方法是一种策略，但这样的话浏览器会不停的渲染DOM树，会影响用户体验。
DocumentFragment，中文为文档片段，可以理解为轻量级的节点，可以往里面添加多个子元素。NodeType=11,NodeName=#document-fragment,作为仓库来使用，通常在DOM树看不到，是隐藏的。如果我们想要增加多个元素的时候临时的全部存放到这个仓库里面，存好以后一次性的拿出来塞到DOM树里面，这样就不会重复渲染页面了。
也就是一句话的话，就是为了一次性解决，临时找个地方存放我们想要增加的节点，这个地方就是DocumentFragment.
这个代码给了不用fragment增加节点和用fragment增加节点的方法，并给了注释。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Dom的新增和删除实例</h1>
<ul>
<li>新增一个元素</li>
<li>新增多个元素</li>
<li>删除一个元素</li>
<li>删除多个元素</li>
</ul>
<script>
var h2=document.createElement('h2');
var h2text=document.createTextNode('OS 列表');
h2.appendChild(h2text);
document.body.appendChild(h2);
var ul=document.createElement('ul');
/*var li=document.createElement('li'); //单个创建的方法
var litext=document.createTextNode('windows');
li.appendChild(litext);
ul.appendChild(li);
document.body.appendChild(ul);*/
var oslist=['windows','mac','linux'];
for(var i=0,len=oslist.length;i<len;i++)
{
var li=document.createElement('li');
var litext=document.createTextNode(oslist[i]);
li.appendChild(litext);
ul.appendChild(li); //因为ul在Dom里面，会频繁更新，会影响用户体验。
}
document.body.appendChild(ul);
var ul=document.createElement('ul');
var oslist=['windows','linux','mac'];
var frag=document.createDocumentFragment();
for(var i=0,len=oslist.length;i<len;i++)
{
var li=document.createElement('li');
var litext=document.createTextNode(oslist[i]);
li.appendChild(litext);
frag.appendChild(li); //frag不在DOM里面，不会频繁更新。
}
ul.appendChild(frag);
document.body.appendChild(ul);
</script>
</body>
</html>
