在需要给文档插入大量的新的HTML标记的情况下，通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高，相对而言插入标记的方法会更加简单，速度也更快。
插入标记中有这四个属性innerHtml，outerHTML，innerText，outerText。
这四个属性都有获取状态和设置状态。
我们先来看一小段代码
<div><p>我是div的子元素</p></div>
*在这里我们要先获取这个div,我用divnode代替。在chrome浏览器下测试。
- innerHTML 获取和设置调用元素里面的全部HTML(包括标签）。
- outerHTML 获取和设置调用元素里面的全部HTML及自身（包括标签）。
- innerText 获取和设置调用元素里面的文本。
- outText 设置(包括标签)或获取(不包括标签)对象的文本。
我们先看一下获取状态这四个的区别
设置状态时
divnode.innerHTML="<i>我是innerHTML设置后的div子元素i</i>;
divnode.outerHTML="<b><i>我是outerHTML设置后的b子元素i</i></b>"
divnode.innerText="<i>我是innerHTML设置后的div子元素i</i>";
divnode.outerText="<i>我是innerHTML设置后的div子元素i</i>";
以上是插入标记的四个属性及区别，还有一个insertAdjacentHTML()方法插入HTML内容.insertAdjacentText()与之类似，只是插入文本。
insertAdajcentHTML(where,htmltext)
参数：
where: 指定插入html标签语句的位置
htmltext:要插入的html文本
第一个参数必须是下列值之一：
1. "beforeBegin": 插入到标签开始前（作为前一个同辈元素插入）
2. "afterBegin":插入到标签开始标记之后（作为第一个子元素插入）
3. "beforeEnd":插入到标签结束标记前（作为最后一个子元素插入）
4. "afterEnd":插入到标签结束标记后（作为后一个同辈元素插入）