文档树中的节点们 我们可以用js进行增删改查。
查（获取）：
<div id="box">
</div>
<script>
var box=document.querySelector("#box")
</script>增：分两步——>1、创建元素 2、将创建的元素添加到文档树中
1、创建元素 ：用createElement()，小括号内填写的是字符串格式的标签名，如：createElement("div")创建div标签、createElement("span")创建span标签、createElement("input")创建input标签。
创建的元素不存在文档对象模型document，不会渲染到页面上。
2、将创建的元素添加到文档树中：appendChild(),小括号内填写的是我们上一步所创建的元素。例如：x.appendChild(y),把y节点对象添加到x节点中。
改：用innerHTML修改内容
具体代码展示：
<div id="box">
</div>
<script>
var box=document.querySelector("#box")
//创建一个元素
var cj=document.createElement("div")
//添加到box中
box.appendChild(cj)
//我们再给我们新创建的新标签添加一点内容
cj.innerHTML = "我新建的"
</script>运行后：
除了上述方法添加元素外，我们还可以只使用innerHTML来实现，这里要用到ES6新出的模板字符串，模板字符串也能识别html标签。
<div id="box">
</div>
<script>
var box=document.querySelector("#box")
box.innerHTML=`<div>我是用模板字符串书写的</div>`
</script>运行后：
我们在用innerHTML给元素添加内容时，会把以前的内容覆盖掉，那么我们怎么解决呢？
解决方案：创建一个元素 设置它的innerHTML 然后把它添加到box2或者直接在它的innerHTML上加内容。
具体代码说明：
<div id="box">
我是box
</div>
<script>
var box=document.querySelector("#box")
var newbox=document.createElement("div")
newbox.innerHTML="666"
box.appendChild(newbox)
box.innerHTML+="666"
</script>运行结果：
删：remove()移除自己、removeChild()移除自己的子节点
remove()：
<div class="box">
<div class="box1">666</div>
<div></div>
<div></div>
</div>
<script>
var box1=document.querySelector(".box1")
box1.remove()
</script>运行过后：
可以看到类名为box1的div标签已经被删掉了。
removeChild()：
<div class="box">
<div class="box1">666</div>
<div></div>
<div></div>
</div>
<script>
var box=document.querySelector(".box")
var box1=document.querySelector(".box1")
box.removeChild(box1)
</script>同样也删除了 类名为box1的div标签
说到清除自己的节点，我们还可以通过innerHTML清除自己的子节点，可以innerHTML的功能非常强大，就靠它就能实现增删改查的功能。
清空所有的子节点：
<div class="box">
<div class="box1">666</div>
<div></div>
<div></div>
</div>
<div class="box3">333<div>
<script>
var box=document.querySelector(".box")
box.innerHTML=""
</script>
可以看到类名为box的div标签的所有的子节点都被移除了。
克隆：cloneNode() 克隆的小括号有一个参数true，可根据自己的需求选择是否写true。
有true时：会克隆后代元素和所有的事件
无true时：不会克隆事件。
补充：插入节点insertBefore（参数1，参数2），参数1为要插入的节点，参数2为要插入位置的后面那个节点。
代码展示说明：
<div class="box1">
<div class="box02"></div>
<div class="box2">
<div class="box3">666</div>
</div>
</div>
<script>
var box1=document.querySelector(".box1")
var box2=document.querySelector(".box2")
//创建我们要插入的节点
var ins=document.createElement("div")
//在box1里面的box2前面插入我们创建的节点
box1.insertBefore(ins,box2)
</script>运行结果：
