上一篇文章介绍了如何用DOM来查看元素，这一篇就把剩下的增删改操作介绍一下。
增加操作
1.创建元素节点 createElement
我们可以通过document.createElement(‘div’);这个方法来创建一个元素，里面的参数填写我们要创建的标签名称，像div、p、span等等。
1. var div = document.createElement(‘div’);
这样我们先创建一个div。
2.创建文本节点 document.createTextNode
我们可以通过document.createTextNode(‘abcd’)方法来创建一个文本节点，里面的参数填写我们的文本内容。
1. var text = document.createTextNode(‘hello’);
这里我们再创建一个文本节点。
3.创建注释节点 document.createComment
我们可以通过document.createComment(‘comment’);方法来创建一个注释节点，参数写我们要写的注释内容。虽然我从来没用过…但是还是要介绍这个方法。
1. var comment = document.createComment(‘comment’);
这里我们再创建一个注释文本节点。
4.创建文档碎片 document.createDocumentFragment
这个方法可以创建一个文档碎片，我们在后面讲的有关提高性能的部分会用到这个方法。
插入操作
1.appendChild(child);
这个是父级调用的方法，它会将child元素插入到父级里面，而且是放到逻辑后面的位置上。
1. div.appendChild(text);
2. div.appendChild(comment);
这样div里面就会有一行文本一行注释。
这里如果是我们创建的元素，那么appendChild就是把新元素插入进去，但是如果是DOM里面已经存在的元素，那么appendChild就是把这个已经存在的元素给剪切掉，然后放到新的位置上。
2.insertBefore(a, b);
这个依然是父节点调用的方法，它的意思是将a插入到b前面的位置上，其中b要求是这个父级的子节点。这个方法可以记作为 insert a before b;
1. var span = document.createElement(‘span’);
2. div.insertBefore(span, comment);
这样我们就把一个span元素插入到了刚才的注释文本前面。
删除操作
removeChild
这个方法依然是父级调用的，参数就是要删除的子节点，其实实际上是剪切，这个方法会把我们删除掉的元素给返回，我们可以用一个变量去保存这个被删除的元素。
1. var div = document.body.remove(div);
这样我们的div变量就可以保存刚才被删除的div这个元素。
替换操作
replaceChild(new, origin)
这个方法同样是父级调用，用新的元素new来替换原来的origin元素，原来的被替换掉的元素可以被返回，我们可以像删除操作那样用一个变量来保存。
现在我们就可以通过以上这些方法来动态创建一棵DOM树了哟~
下面介绍一些Element节点的属性和方法。
属性
1.innerHTML
这个属性可以用字面意思来理解，元素里面的HTML结构。
1. div.innerHML = ‘<div>123</div>’;
我们可以直接通过这个属性来改变元素内部的结构和内容，不过注意它会直接删除掉以前的所有结构，如果以前内容还有其他的节点的话，使用的时候就要小心了。
2.innerText/textContent
innerText老版本的火狐浏览器不兼容，textContent老版本的IE浏览器不兼容。
这个属性可以直接调出来元素内部的文本信息，若果这个元素还有很多的子元素的话，那么会把子元素里面的文本信息一起返回。
不过需要注意的是，如果我们要改写innerText或者textContent的话，它会像innerHTML一样，先把内部的所有html结构先删除掉，然后再写入text文本，因此里面有html结构的时候写入也要小心。
• 这里提一下，如果我们有很多字符串要添加到一个元素的内部的话，虽然用innerHTML或者innerText方法，但是却不是用innerHML += str的方法，因为+=操作符的效率极低，当字符串很多的时候会非常非常消耗性能。
遇到这种情况我们一般是用数组的join方法将字符串全部连接成一个字符串，然后一次性写入innerHTML。
方法
1.ele.setAttribute();
这个方法可以设置元素的属性（特性），比如class、id等一些行间属性。
1. div.setAttribute(‘id’, ‘demo’);
这个操作就可以给div这个元素设置一个叫做demo的id。
2.ele.getAttribute();
这个方法是获取元素的行间属性。
• 同样这里需要提一下，每个元素自带的行间属性都有自己特殊的功能，而我们通过自己给他们设置的属性并没有任何功能，因此我们可以来赋予他们功能和用处。
• 还有一点，我们在后面改变元素的样式的时候，通常不是直接修改他的css样式，而是事先写好它应该变成的样式，然后装进一个class里面，我们直接修改他的类名而不是css样式。