insertAdjacentHTML( )，insertAdjacentElement( ) , insertAdjacentText( ) 方法

insertAdjacentHTML（）是一个插入标记的方法，这个方法最早在IE中出现，现在绝大多数浏览器都支持这个方法。

insertAdjacentHTML（）接受2个参数：要插入的位置和要插入的HTML文本，第一个参数必须是下面4个值之一，第二个参数是一个HTML字符串：

beforebegin，在当前元素之前插入一个紧邻的同辈元素；

afterbegin，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；

beforeend，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；

afterend，在当前元素之后插入一个紧邻的同辈元素；

<div id="div">
    <span>大家好，我是div的初始子节点</span>
</div>

var div = document.getElementById('div');

div.insertAdjacentHTML('beforebegin','<p>现在我是div前面的同辈元素</p>');

div.insertAdjacentHTML('afterbegin','<p>现在我是div的第一个元素</p>')

div.insertAdjacentHTML('beforeend','<p>现在我是div的最后一个元素</p>')

div.insertAdjacentHTML('afterend','<p>现在我是div后面的同辈元素</p>')

执行的结果HTML如下：

<p>现在我是div前面的同辈元素</p><div id="div"><p>现在我是div的第一个元素</p>
    <span>大家好，我是div的初始子节点</span>
<p>现在我是div的最后一个元素</p></div><p>现在我是div后面的同辈元素</p>

页面效果：

现在我是div前面的同辈元素

现在我是div的第一个元素

大家好，我是div的初始子节点

现在我是div的最后一个元素

现在我是div后面的同辈元素

insertAdjacentElement和insertAdjacentText分别类比insertAdjacentHTML方法的元素节点版本和文本节点版本，比较容易区分。

insertAdjacentHTML( )，insertAdjacentElement( ) , insertAdjacentText( ) 方法

猜你喜欢