1.CRUD(增，删，改，查)：
- 增，即创建节点：createElement(tagName),
tagName是需要创建的标签名
<body>
<div id="box">
<p id="text">it's a nice day!</p>
<button id="btn">我是一个按钮</button>
<p>我会不会被删掉？</p>
</div>
<script type="text/html">
var box=document.getElementById("box");
//增，即创建节点(添加一个img标签)
var img=document.createElement("img");
//给img标签添加属性
img.src="./images/pic1.jpg";
img.width=200;
img.height=200;
/*在box最后添加img图片；
box.appendChild(img);
*/
/*
//可以在box任意位置添加img标签
//在button前添加img标签；
var btn=document.getElementById("btn");
box.insertBefore(img,btn);
*/
//在p标签前添加img标签；
var text=document.getElementById("text");
box.insertBefore(img,text);
</script>
</body>
样式：
<style> #box{ 400px; height: 400px; background-color: pink; } </style>
- 删，即删除节点；有两种方法
<script>
//删，即删除节点
var text=document.getElementById("text");
//方法一，先获取父节点，然后调用removeChild(需要删除的标签名)；
var fatherNode=text.parentNode;
fatherNode.removeChild(text);
//方法二，直接调用remove()方法
var btn=document.getElementById("btn");
btn.remove();
console.log(fatherNode.children);
</script>
- 复制节点，oldeNode.cloneNode(true);
想要复制的节点调用函数cloneNode(参数),得到一个新节点，参数是布尔类型，true表示深复制，false表示浅复制
代码块：
<script>
//复制节点, 新节点＝要复制的节点.cloneNode(boolean类型的参数)；
var box=document.getElementById("box");
var newBox=box.cloneNode(false); //浅复制，只复制一层；
console.log(newBox);
var newBox2=box.cloneNode(true); //深复制，复制全部；
console.log(newBox2);
</script>
运行结果：
- 插入节点：
1).父节点.appendChild(新节点)，在父节点最后插入一个节点；
2).父节点.insertBefore(新节点，参考节点)；在参考节点前插入，如果参考节点为Null，则在节点最后插入一个节点