innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

在需要给文档插入大量的新的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":插入到标签结束标记后（作为后一个同辈元素插入）