Javascript(笔记27) - DOM基本操作 - 节点的增插删替换操作
节点的新增
document.createElement()
新增或创建一个元素节点
var div = document.createElement("div");
var p = document.createElement("p");
var span = document.createElement("span");
要创建什么元素节点，就写那个节点的标签；要创建 div 就写 div；创建 p 就写 p ; 以此类推；
创建的元素目前存在变量里，还没有到页面上去；
使用 document.body.appendChild() 把他追加到 body 里面；
document.body.appendChild(div);
这样页面里就多了一个刚创建的 div ；
也可以给 div 里追加一点内容；
div.innerHTML = 123;
document.createTextNode()
创建文本节点
var text = document.createTextNode("hello world");
再把这个文本节点放到上面的 div 中；
var div = document.createElement('div');
var text = document.createTextNode("hello world");
document.body.appendChild(div);
div.appendChild(text);
我们再多建一个；
var div = document.createElement('div');
var text = document.createTextNode("hello world");
var span = document.createElement('span');
document.body.appendChild(div);
div.appendChild(text);
div.appendChild(span);
var demoText = document.createTextNode('javascript');
span.appendChild(demoText);
看下HTML结构：
如果这个时候，我们再把页面里面已经有部分插入到新建的标签里面；
var em = document.createElement('em');
span.appendChild(em);
em.appendChild(text);
看下HTML结构：
text 被剪切走了。
document.createComment()
创建注释节点
var comment = document.createTextNode("this ia comment"); // 这里得有内容
创建注释节点的时候，要写内容，没有内容是看不到的；
节点的插入
parentnode.appendChild()
在元素节点内插入节点，类似于 push ，插入到节点的后面；
var div = document.createElement("div");
document.body.appendChild(div);
把页面已有的 span 元素，插入到已有的 div 里，行么?
<div></div>
<span></span>
把页面中的 span 和 div 选出来， 再把 span 插入到 div 里；
var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
div.appendChild(span);
看下结构：
本来是兄弟结构，现在变父子结构了；
ParentNode.insertBefore(a,b)
父级调用，把 a 插入到 b 的前面；
<div>
<span></span>
</div>
现在要在 div 里面插入一个 em ，要把 em 放在 span 的前面；
var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
var em = document.createElement('em');
div.insertBefore(em,span);
先把 div 和 span 选出来；再新建一个 em 元素节点；再把 em 节点插入到 span 前面；
看下HTML：
再创建并插入一个 i ，放在 em 的上面；
var i = document.createElement('i');
div.insertBefore(i,em);
看下HTML：
看起来是比较简单的；
节点的删除
parent.removeChild()
父级节点调用，杀了儿子元素节点；
用上面新建的 HTML 结构，我们把 div 里的 i 删除掉；
div.removeChild(i);
直接这么干就可以，看下HTML：
注意：removeChild 不只是把节点删除，还可以返回这个被删除的节点，相当于剪切；
如果我们把返回打印的话：
var temp = div.removeChild(i);
console.log(temp);
看下控制台：
我们新建一个 文本节目，放在 span 里，再把这个文本节点删除：
var text = document.createTextNode("hello world");
span.appendChild(text);
再把这个文本节点删除：
span.removeChild(text);
child.remove()
自己调用，杀了自己；
现在页面里还剩下三个元素节点，其中的 em 和 span 想自己解决：
em.remove();
span.remove();
看下HTML：
这种 remove() 方法，是真删除，删除就没有了；
节点的替换
parent.replaceChild(new,origin)
父级调用，拿新的 new 元素，替换老的 origin 元素；
现在创建两个新的元素节点： p 和 strong ，把 p 元素节点插入到 div 中；
var p = document.createElement('p');
var strong = document.createElement('strong');
div.appendChild(p);
看下HTML：
然后用 strong 替换 p ；
div.replaceChild(strong,p);
看下HTML：
注意：这里的 strong 也是被剪切出来的，可以被返回。
常用的几个方法：
document.createElement()
document.appendChild()
ParentNoe.insertBefore(a,b)
parent.removeChild()
child.remove()
