06 JS-DOM之--节点操作（4种）附案例源码

节点的操作一共四种：

创建节点（3种）

添加节点（2种）

删除节点（1种）

复制节点

1、创建节点（3种）

第一种。document.write(“”);

缺点：在事件触发后，书写内容，容易覆盖掉原有内容。
如果是在页面加载的时候，直接书写，不会发生覆盖。

第二种。innerHTML属性。这个属性会识别标签。

注意点：时时刻刻都会覆盖掉原有内容，所以赋值之前，先获取内容，并到一起重新赋值。

缺点：原有的子元素事件会被取消
优点：操作简单。属性绑定简单。标签嵌套简单。

第三种：document.createElement(“li”);

优点：老元素的事件不会被覆盖。创建方便，想绑定什么属性，都可以。

缺点：每次都要绑定属性，而且还需要添加。比较繁琐。

2、添加节点（2种）

第一种：父节点.appendChild(新节点);

把一个新节点，放入一个父节点的最末尾。

第二种：父节点.insertBefore(新节点,参考节点);

把一个新节点，放入一个参考节点之前。

如果参考节点是undefined或者null,那么方法等同于appendChild

3、删除节点（1种）

• 父节点.removeChild(子节点);
• 不知道父级的情况下，可以这么写：
  子节点.parentNode.removeChild(子节点);//自杀

4、复制节点

节点.cloneNode();

参数为布尔类型值，true为深层复制（复制节点及其所有子节点），默认为false浅层复制（复制节点本身，不复制子节点）。

console.log(box.cloneNode());//不加参数浅层赋值。
console.log(box.cloneNode(true));//加参数true深层赋值。

节点操作案例源码下载地址：https://github.com/luyu1314/03-DOM-case