在DOM中，添加元素有三步：
创建空元素
设置关键属性
将元素添加到DOM树中
1.创建空元素
var elem=document.createElement(“元素名”)
var tr=document.createElement(“tr”)
var td=document.createElement(“td”)
2.设置关键属性
在创建好空元素之后要给空元素设置样式
（1）设置关键属性 元素.属性名
a.innerHTML="go to tmooc";
a.herf="http://tmooc.cn";
结果为：
<a href="http://tmooc.cn">go back tmooc</a>
（2）设置关键样式
a.style.opacity="1";//单独设置样式
a.style.cssText="width: 100px;height:100px";//统一设置样式
3.将元素添加在DOM树中
(1) parentNode .appendChild(childNode)
var div=document.createElement("div");
var txt=document.createTextNode("版权声明")；
div.appendChild(txt);
document.body.appendChild(div);
(2) parentNode.insertBefore(newChild,pos)
用于在父元素中的指定子节点之前添一个新的子节点：
<body>
<ul id="menu">
<li>the first page</li>
<li>connect with us</li>
</ul>
<script type="text/javascript">
var ul=document.getElementById("menu");
var newLi=document.createElement("li");
ul.insertBefore(newLi,ul.lastChild);
</script>
</body>
由于每次修改DOM树都会展开搜索一遍（layout）这样一来会导致时间空间开销，所以我们尽量在插入之前处理好子节点以达到优化的目的 :
(1)若同时创建父元素和子元素时，在内存中先将子元素添加到父元素节点上，再将父节点插入DOM树中。
（2）若只添加多个同级子元素，我们可以先将所有子元素临时添加到一个虚拟文档片段中（即为临时父节点），然后将文档片段整体添加到页面中:
1先创建文档片段：
var frag=document.createDocumentFragment（）;
2将子元素加入frag中：
frag.appendChild(child);
3将frag插入到DOM中
扫描二维码关注公众号，回复：
8624118 查看本文章
parent.appendChild(frag);
append之后frag会自动释放，不会占用元素.
