概述
insertAdjacentHTML() 將指定的文本解析為HTML或XML，并將結(jié)果節(jié)點(diǎn)插入到DOM樹(shù)中的指定位置。它不會(huì)重新解析它正在使用的元素，因此它不會(huì)破壞元素內(nèi)的現(xiàn)有元素。這避免了額外的序列化步驟，使其比直接innerHTML操作更快。
語(yǔ)法
element.insertAdjacentHTML(position, text);
position是相對(duì)于元素的位置，并且必須是以下字符串之一：
beforebegin: 元素自身的前面。afterbegin: 插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)之前。beforeend: 插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后。afterend: 元素自身的后面。
text是要被解析為HTML或XML,并插入到DOM樹(shù)中的字符串。
位置名稱(chēng)的可視化：
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
注意： beforebegin和afterend位置,僅在節(jié)點(diǎn)在樹(shù)中且節(jié)點(diǎn)具有一個(gè)parent元素時(shí)工作.
eg
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 此時(shí)，新結(jié)構(gòu)變成：
// <div id="one">one</div><div id="two">two</div>
游覽器兼容
image.png
