>在之前的文章中，学习过了DOM的访问方式，其中也把DOM相关的概念进行了学习，其实DOM的内容还有很多，所以本文将会继续学习DOM操作相关的内容，DOM操作涉及到的操作有：**增**、**删**、**改**、**查**，而**查**这方面的内容其实就是上一次所写的“[访问方式](https://www.jianshu.com/p/0d2ae67751fa)”。 ##DOM的增加 DOM操作中**增**指的是增加节点，分为两部分：**创建节点**和**插入节点**。 ###创建节点 创建节点中常用的API方法主要有： 1. ``document.createElement()``：创建指定的HTML元素 2. ``document.createTextNode()``：创建文本节点 3. ``document.createDocumentFrame()``：创建文档片段 4. ``document.createAttribute()``：创建节点属性 5. ``node.cloneNode()``：克隆节点 ###插入节点### 插入节点常用的API方法主要有： 1. ``node.appendChild()``：末尾追加一个新节点 2. ``node.insertBefore()``：插入一个新节点 ``` ``` **例子解释：** 这段代码创建新的 ``

``元素： ``` var para=document.createElement("p"); ``` 如需向 ``

``元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点： ``` var node=document.createTextNode("这是新段落。"); ``` 然后您必须向 ``

``元素追加这个文本节点： ``` para.appendChild(node); ``` 最后您必须向一个已有的元素追加这个新元素。 这段代码找到一个已有的元素： ``` var element=document.getElementById("div1"); ``` 这段代码向这个已有的元素追加新元素： ``` element.appendChild(para); ``` ####关于document.createAttribute() `` document.createAttribute()`` 方法创建并返回一个新的属性节点。但是这个方法不是很常用，如果涉及到创建属性，一般使用`` node.setAttribute()`` 。 ```

var node = document.getElementById('div1'); var newAttr = document.createAttribute('title'); //创建一个新的title属性； newAttr .nodeValue = 'Hello world!'; //title属性的值是：Hello world! node.setAttributeNode(attr); //运用到对应的元素节点上 ``` ####关于node.cloneNode() `` node.cloneNode(deep)`` 方法返回该节点的一个副本，`` deep`` 可选，表明是否采用深度克隆，如果为`` true`` ，则该节点的所有后代节点也都会被克隆，否则，只克隆该节点本身。 ``` var node = document.getElementById('div1'); var cloneNode = node.cloneNode(true); //克隆div1整个节点； cloneNode.id = "div2"; //修改克隆的节点id名称为div2； document.body.appendChild(cloneNode); //在网页中追加克隆的节点； ``` ##DOM的删除 DOM节点的删除主要API是``node.removeChild()``;可以使用``parentNode.removeChild(child)``删除指定父节点``parentNode``的一个子节点``child``，并返回被删除的节点。 注意事项：这个方法是要在被删除的节点的父节点上调用的，而不是在被删除节点上调用的，如果参数节点不是当前节点的子节点，``removeChild`` 方法将报错。 ``` ``` **例子解释：** 这个 HTML 文档含有拥有两个子节点（两个``

``元素）的 ``