DOM节点的创建

1、createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称

var a=document.getElementsByClassName('name1')[0];
var d=document.createAttribute('div');//创建	
　　a.setAttributeNode(d);//添加
　　a.setAttribute('div','100')//设置

2、　createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容

var a=document.getElementsByClassName('name1')[0];
var d=document.createTextNode('div');//创建
　　a.appendChild(d)//添加

3、createElement() 创建一个元素节点 => 接收参数为string类型的nodename

var a=document.getElementsByClassName('name1')[0];
var d=document.createElement('div');//创建
	a.appendChild(d)//添加

4、createComment()创建一个注释节点 => 接收参数为string类型的注释文本

var a=document.getElementsByClassName('name1')[0];
var d=document.createComment('div');//创建
	a.appendChild(d)//添加

5、DocumentFragment()

创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。

DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升

ps:使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。

<body>
	<ul>
		<li>Alice</li>
		<li>Bob</li>
	</ul>
	<button onclick="test()">测试</button>
</body>
<script type="text/javascript">
	function test() {
		var li =document.getElementsByTagName('li')[0]; //ul中的第一个li节点
		var newFrag = document.createDocumentFragment();
		newFrag.appendChild(li);
		newFrag.childNodes[0].childNodes[0].nodeValue = 'Candy';//获取子节点的text并修改
		document.getElementsByTagName('ul')[0].appendChild(newFrag);
		} 
</script>

只能操作一次

var p = document.createElement('p');
 p.innerHTML = '测试DocumentFragment';
 var fragment = document.createDocumentFragment();
 fragment.appendChild(p);
fragment.innerHTML = '<p>测试DocumentFragment</p>';
fragment.innerHTML = '<span>测试DocumentFragfffffment</span>';//只能操作一次
 document.body.appendChild(fragment);