這篇文章主要介紹.insertadjacenthtml()方法如何使用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是一家專業(yè)提供瀘縣企業(yè)網(wǎng)站建設,專注與成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設、H5建站、小程序制作等業(yè)務。10年已為瀘縣眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設公司優(yōu)惠進行中。

insertAdjacentHTML和 insertAdjacentText這兩個方法很靈活，可以在指定的地方插入html內(nèi)容和文本內(nèi)容，在大部分情況下比element.innerHTML的性能更好，比Document Fragments更好的HTML文檔插入方案，因為我們知道Document Fragments在某些IE版本中的表現(xiàn)不好。

insertAdjacentText方法與 insertAdjacentHTML方法類似，只不過只能插入純文本，參數(shù)相同。

insertAdjacentHTML和insertAdjacentText方法：

IE的DHTML對象提供了四個可讀寫的屬性來動態(tài)操作頁面元素的內(nèi)容：innerText, outerText, innerHTML, outerHTML.

需注意兩點:

1. 其中innerText,outerText屬性的值是作為普通文本呈現(xiàn)的，即使它含有HTML標簽也如實反應出來;而innerHTML, outerHTML呈現(xiàn)的是經(jīng)HTML引擎解析后文本，它可以反應屬性中HTML標簽的表現(xiàn)效果。

2. 對對象的outerText，outerHTML屬性賦值(即寫操作)會刪除該對象。

以上四個屬性的賦值操作只是替換原對象的文本內(nèi)容，想要在頁面中指定元素相關位置新增文本內(nèi)容，需采用insertAdjacentHTML和insertAdjacentText方法。形式如下:

object.insertAdjacentText(sWhere, sText)

object.insertAdjacentHTML(sWhere, sText)

其中 sWhere 表示插入的文本相對于html標簽的位置，有如下四個預設值:

beforeBegin，afterBegin，beforeEnd，afterEnd

使用中需注意如下幾點:

1.這兩種方法必須在整個文檔裝載完成之后才能使用，否則將出錯。

2. InsertAdjacentText只能插入普通文本，InsertAdjacentHTML插入html格式的文本

3. 用InsertAdjacentHTML插入腳本，必須在script元素中使用defer屬性，否則腳本執(zhí)行將出現(xiàn)運行期錯誤

4.InsertAdjacentHTML插入html元素后，all以及其他可能的元素集合將自動更新以反應動態(tài)變化。如頁面后續(xù)元素的sourceIndex 屬性將改變。

5.當賦予InsertHTML/outerHTML屬性無效的HTML標簽，該方法可能出現(xiàn)運行時錯。如以下代碼將出錯:

此外頁面內(nèi)容動態(tài)操作還需要注意如下一些細節(jié):

1.只有文檔BODY內(nèi)顯示的內(nèi)容能被以上屬性和方法動態(tài)改變，BODY對象的內(nèi)容能被動態(tài)操作，但BODY對象本身無法被替換。

2.以上屬性和方式不能操作空標簽(沒有內(nèi)容的html標簽)，如input,img。

3.對于table對象而言，只有td(innerHTML/innerText)和table(outerHMTL/outerText)對象可以用某些屬性來替換或插入內(nèi)容;而其他table對象，如tr、tbody不能用這些屬性來改變內(nèi)容。

添加HTML內(nèi)容與文本內(nèi)容以前用的是innerHTML與innerText方法，最近發(fā)現(xiàn)還有insertAdjacentHTML和 insertAdjacentText方法，這兩個方法更靈活，可以在指定的地方插入html內(nèi)容和文本內(nèi)容。insertAdjacentHTML方法：在指定的地方插入html標簽語句

.insertadjacenthtml()方法具體怎么使用?

原型：insertAdajcentHTML(swhere,stext)

Element.insertAdjacentHTML方法解析HTML字符串，然后將生成的節(jié)點插入DOM樹的指定位置。

element.insertAdjacentHTML(position, text);

該方法接受兩個參數(shù)，第一個是指定位置，第二個是待解析的字符串。

參數(shù)：

swhere: 指定插入html標簽語句的地方，有四種值可用：

1. beforeBegin:插入到標簽開始前

2. afterBegin:插入到標簽開始標記之后

3. beforeEnd:插入到標簽結(jié)束標記前

4. afterEnd:插入到標簽結(jié)束標記后

// 原來的HTML代碼：
one
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '
two
');
// 現(xiàn)在的HTML代碼：
// 
one
two

注意：該方法不是徹底置換現(xiàn)有的DOM結(jié)構(gòu)，這使得它的執(zhí)行速度比innerHTML操作快得多。

stext：要插入的內(nèi)容

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

原來的內(nèi)容

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

用法：

test1 test2

在JS中可以使用：

test.innerHTML:

也就是從對象的起始位置到終止位置的全部內(nèi)容,包括Html標簽。

上例中的test.innerHTML的值也就是

“test1 test2 ”

test.innerText:

從起始位置到終止位置的內(nèi)容, 但它去除Html標簽

上例中的text.innerTest的值也就是“test1 test2”, 其中span標簽去除了。

test.outerHTML:

除了包含innerHTML的全部內(nèi)容外, 還包含對象標簽本身。

上例中的text.outerHTML的值也就是

test1 test2

完整示例：

test1 test2

innerHTML內(nèi)容
inerHTML內(nèi)容
outerHTML內(nèi)容

特別說明：

innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，如果要輸出不含HTML標簽的內(nèi)容，可以使用innerHTML取得包含HTML標簽的內(nèi)容后，再用正則表達式去除HTML標簽，下面是一個簡單的符合W3C標準的示例：

無HTML,符合W3C標準

以上是.insertadjacenthtml()方法如何使用的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！