DOM节点操作

增删改查

增 - 创建标签节点 - document.createElement - 参数要一个字符串(标签名)

var div = document.createElement("div");

删 - 删除节点 - 父节点.removeChild(子节点)

//获取父节点 div
var div = document.querySelector(".box");
var p = document.querySelector("p");
div.removeChild(p);
// 有的时候，你无法获取父元素，只知道要删除的子元素
//就要先用子元素.parentElement获取父元素
p.parentElement.removeChild(p)

改 - 替换 - 父节点.replaceChild(新的节点,被替换的节点)

// 使用i标签替换掉p标签
// 创建一个i标签
var i = document.createElement("i");
 i.innerHTML = "文本倾斜"
p.parentNode.replaceChild(i,p);
//子元素.parentNode是获取父节点的操作

查 - 获取节点

追加子节点：父元素.appendChild(子节点)

div.appendChild(i);

将一个节点放到某一个子元素前面：父元素.insertBefore(新的节点，旧的节点)

div.insertBefore(i,p.nextElementSibling);

复制节点：节点.cloneNode()
不加参数true，只能复制一个空标签，如果加了true参数，就可以把里面的内容也复制出来

var p1 = p.cloneNode(true);