3_2：操作节点 [ 增 删 复制 ]

知识梳理

// . 创建节点
// . 插入节点
// . 删除节点
// . 复制节点
// . 替换节点

一 插入节点

1）基本语法

parentNode.insertBefore(newNode,referenceNode); //在指定元素前面插入元素
// parentNode 父节点
// newNode 要插入的节点
// referenceNode 将要插在这个节点之前
// 返回被插入节点(newNode)

element.appendChild(aChild);//在元素末尾压入子元素
//aChild 要追加给父节点（通常为一个元素）的节点

2）代码范例

<div>
    <p>你好</p>
</div>
<script>
    var div = document.getElementsByTagName('div');
    var newNode = document.createElement('span');
    newNode.innerHTML = '我是新插入的元素';
    var result = div[0].insertBefore(newNode,div[0].children[0]);
    console.log(result);//<span>我是新插入的元素</span>
</script>

二 删除子节点

1）基本语法

node.removeChild(child);
// node  父节点
// child  子节点
// 返回删除的节点

2）代码范例

<div>
    <p>p元素</p>
    <span>span元素</span>
</div>
<script>
    var div = document.getElementsByTagName('div');
    var res = div[0].removeChild(div[0].children[0]);
    console.log(res);//<p>p元素</p>
</script>

三 复制节点

1）基本语法

var dupNode = node.cloneNode();//浅拷贝 只复制节点本身
var dupNode = node.cloneNode(true);//深拷贝 复制节点本身和所以子节点
//node 被克隆的对象 
//dupNode 克隆生成的节点副本

2）代码范例

<p><span>你好</span></p>
<script>
    var p = document.getElementsByTagName('p');
    var dup = p[0].cloneNode();//浅拷贝
    var deepDup = p[0].cloneNode(true);//深拷贝
    console.log(dup);//<p></p>
    console.log(deepDup);//<p><span>你好</span></p>
</script>

四 替换节点

1）基本语法

parentNode.replaceChild(newChild, oldChild);
//newChild 用来替换 oldChild 的新节点 如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除
//oldChild 被替换掉的原始节点。
//返回被替换的节点

2）代码范例

<div>
    <p>你好</p>
</div>
<script>
    var div = document.getElementsByTagName('div');
    var newChild = document.createElement('span');
    newChild.innerHTML = '我也好';
    var result = div[0].replaceChild(newChild,div[0].children[0]);
    console.log(result);//<p>你好</p> 返回被替换的节点
</script>