JS insertAdajcentHTML 方法简介

修改节点的内容除了常用的innerHTML和innerText之外，还有insertAdjacentHTML和insertAdjacentText方法，可以在指定的地方插入内容。insertAdjacentText方法与insertAdjacentHTML方法类似，只不过是插入纯文本，参数相同。

 

语法：

object.insertAdjacentHTML(where,html)

 

参数说明：

1.where:包括beforeBegin,beforeEnd,afterBegin,afterEnd

beforeBegin: 插入到开始标签的前面。

beforeEnd:插入到结束标签的前面。

afterBegin:插入到开始标签的后面。

afterEnd:插入到结束标签的后面。

 

2.html:需插入的html内容

 

需注意的是：

1.这两个方法必须等文档加载好后才能执行，否则会出错。

2.insertAdjacentText只能插入普通文本，insertAdjacentHTML插入html代码。

3.使用insertAdjacentHTML方法插入script脚本文件时，必须在script元素上定义defer属性。

4.使用insertAdjacentHTML方法插入html代码后，页面上的元素集合将发生变化。

5.insertAdjacentHTML方法不适用于单个的空的元素标签(如img，input等)。

 

说明：