DOM添加，删除，插入的各方法

1. 创建节点

createElement 使用方法：

var div = document.createElement('div') //创建一个div节点  
div.id = 'nihao' //给节点设置属性

createDocumentFragment createdocumentfragment()方法创建了一个虚拟的节点对象，节点对象包含所有属性和方法。当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment()方法可以更安全改变文档的结构及节点
```
var d=document.createDocumentFragment();
d.appendChild(document.getElementsByTagName("LI")[0]);
d.childNodes[0].childNodes[0].nodeValue="Milk";
document.getElementsByTagName("UL")[0].appendChild(d);
```

createTextNode

var text = document.createTextNode('hello word') //创建一个文本节点
var div = document.createElement('div')
div.appendChild(text)  //将文本添加到div中

2. 添加，移除，替换，插入

appendChild() appendChild可将创建的节点添加到目标节点下

var li = document.createElement('li') //创建一个ul节点
var ulbox = document.getElementById('ulbox')
ulbox.appendChild(li)  //将li节点添加到ul节点中

removeChild() removeChild()方法，用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点，注意被移除的节点仍然在文档中，不过文档中已没有其位置了

var ul = document.getElementById("ulbox"); //获得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
----
var ul = document.getElementById("ulbox"); //获得ul
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.removeChild(lis[0]); 　　　　　　//移除第一个li，与上面不同，要考虑浏览器之间的差异

replaceChild() replaceChild() 方法，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点

var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
----
var ul = document.getElementById("myList"); //获得ul;
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li

insertBefore() insertBefore() 方法，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法，该方法接受2个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前
----
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.lastChild); //把li添加到ul的最后一个子节点（包括文本节点）之前
----
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.insertBefore(li,lis[1]); 　　　　//把li添加到ul中的第二个li节点前

cloneNode cloneNode()方法，用于复制节点，接受一个布尔值参数，true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
```
var ul = document.getElementById("myList"); //获得ul
var deepList = ul.cloneNode(true); //深复制
var shallowList = ul.cloneNode(false); //浅复制
```

参考文章来源：https://blog.csdn.net/qi1271199790/article/details/53869508

Lirx-Xin / LirxdeBlog

DOM添加，删除，插入的各方法 #2

DOM添加，删除，插入的各方法

1. 创建节点

2. 添加，移除，替换，插入