DOM - 插入节点和三个Child方法

插入节点

insertBefor(); 插入

格式：父节点.insertBefor( 插入节点，旧节点 )

功能：将插入的节点插入到旧节点之前

举个小例子：

创建一个strong节点，将这个节点插入到span节点之前

我们先把封装好的函数引入进来：

我们来通过上节封装的函数，来创建一个strong节点

运行结果如下：

在源码中可以看到，在span上添加了一个新标签为strong

以上是insertBefor插入到某个节点之前

那么是不是有一个元素insertAfter是插入到某个节点之后呢？

很遗憾的告诉大家在DOM中是没有这个方法的！

如果我们需要插入某个节点之后，就需要自己封装函数了

拿上面的例子说，如果我们想要插入到em节点之后，就相当于插入整个子节点的末尾

运行结果如下：

我们调用这个函数就可以进行在某节点之后插入节点的操作了

最后，还是不要忘了将我们封装好的函数复制到我们之前的tool.js文件中，以便以后的使用！

元素节点三种Child方法

1.replaceChild();  替换节点

格式：parent.replaceChild( newNode,oldNode );

( 替换哪个节点,替换成谁 )

功能：用newNode将oldNode替换掉

举个小例子：

我们要把div节点替换成strong节点

运行结果如下：

可以看出，div被strong替换了

以上是替换节点

2.cloneNode();  克隆

格式：node.cloneNode();

参数：默认是false；也可以穿true，true文本一起克隆

功能：克隆节点

返回值：新克隆出来的节点

举个小例子：

如果我们想要让div在span节点上下都有，怎么操作呢？

我们先来用上节的方法，将div放在span的上面：

此时运行结果为：

但是这样操作span的下面就没有div了，这时候就需要与克隆语句配合操作了

运行结果如下：

此时两个div便都存在了，但是文本并不能克隆

这时候我们加上参数true试一下：

运行结果如下：

此时节点与文本一起克隆成功了。

3.removeChild( );  删除

格式：node.parentNode.removeChild( node );

//当前被删除节点node的父节点，去调用removeChild方法，将此节点node删除

功能：删除节点

参数：删除节点名

举个小例子：

将div节点删除

运行结果如下：

可以看出div已被删除了

以上就是我们所有的元素节点的操作方法

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web