轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

HTML DOM insertAdjacentHTML() 方法

实例

在header元素之后插入一个新的 <p> 元素:

var h = document.getElementById("myH2");
h.insertAdjacentHTML("afterend", "<p>My new paragraph</p>");
亲自试一试 »

定义和用法

insertAdjacentHTML()方法将文本作为HTML插入到指定位置。

四种可用值:

"afterbegin"
"afterend"
"beforebegin"
"beforeend"

浏览器支持

表中的数字表示支持该方法的第一个浏览器版本。

方法
insertAdjacentHTML() 1 4 8 4 7

语法

node.insertAdjacentHTML(position, text)

参数值

参数 类型 描述
position String 必需。相对于元素的位置。
四种可用值:
"afterbegin" - 在元素开始之后（作为第一个子元素）
"afterend" - 元素之后
"beforebegin" - 在元素之前
"beforeend" - 在元素末尾之前（作为最后一个子元素）
text String 要插入的文本

更多实例

实例

使用 "afterbegin" 值:

h.insertAdjacentHTML("afterbegin", "<span style='color:red'>My span</span>");
亲自试一试 »

实例

使用 "beforebegin" 值:

h.insertAdjacentHTML("beforebegin", "<span style='color:red'>My span</span>");
亲自试一试 »

实例

使用 "beforeend" 值:

h.insertAdjacentHTML("beforeend", "<span style='color:red'>My span</span>");
亲自试一试 »