js-DOM常用操作-页面修改型API

页面修改型API

• 添加节点appendChild

parent.appendChild(child);

child作为parent中最后一个子节点被添加。

• 插入节点insertBefore

parentNode.insertBefore(newNode, refNode);

parentNode：新节点的被添加后的父节点；
newNode：待添加的节点；
refNode：已存在的节点，新节点newNode在这个节点前插入；

• 删除节点removeChild

parent.removeChild(child);

        parent是child的父节点，返回值是被删除的节点child。为确保可以删除，一般利用被删除节点的父节点进行删除子节点：

if(node.parentNode){
    node.parentNode.removeChild(node);
}

• 替换节点replaceChild

parent.replaceChild(newChild, oldChild);

newChild: 替换的节点，可以是新创建的也可以是已存在的节点；
oldChild：被替换的节点

总结：
1.如果是已经存在的节点，不管是新增还是替换，其原来位置的节点将被移出。
2.节点本身绑定的事件不会消失

        JS和jQuery的DOM操作在初学的时候很容易搞混，所以画了一个简单表格对比一下，方便记忆。

JS vs jQuery