节点操作

创建标签

document.createElement(标签名)

var div = document.createElement('div')
console.log(div);
div.innerText = '盒子';

插入标签

给父标签追加一个子标签

父标签.appendChild(子标签节点)

var body = document.querySelector("body");
console.log(body);
body.appendChild(div)

标签添加到某一个子标签的前面

父标签.insertBefore(要插入的子标签,原来有旧的标签)

var b = document.createElement('b')
b.innerText = '加粗文字';
console.log(b);
body.insertBefore(b,div)

 

替换标签

父标签.replaceChild(新的标签,旧的标签)

var i= document.createElement("i");
i.innerText = '倾斜文字';
console.log(i);

body.replaceChild(i,b)

 

删除标签

父标签.removeChild(子标签)

body.removeChild(i)

复制标签

标签.cloneNode() // 复制了一个空标签

var newDiv = div.cloneNode()
console.log(newDiv);

标签.cloneNode(true) - 把标签中的内容都复制出来

var newDiv = div.cloneNode(true)
console.log(newDiv);

总结：

创建：document.createElement()

插入：

父标签.appendChild()

父标签.insertBefore(新的标签,旧的子标签)

替换：父标签.replaceChild(新的,旧的)

删除：父标签.removeChild(子节点)

复制：标签.cloneNode(true)