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-DOM常用操作-页面修改型API_第1张图片
JS vs jQuery

你可能感兴趣的:(js-DOM常用操作-页面修改型API)