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":插入到標籤結束標記後（作為後一個同輩元素插入）

 

innerHTML,outerHTML,innerText,outerText區別以及insertAdjacentHTML()方法