insertAdjacentHTML()方法将指定的文本解析为HTML,并将结果节点插入指定的位置。
此方法不会重新解析正在使用该元素的元素,因此不会破坏该元素内部的现有元素。
这避免了额外的序列化步骤,使其比直接的innerHTML操作快得多。
element.insertAdjacentHTML(position, text)
var head = document.getElementsByTagName("h2")[0]; head.insertAdjacentHTML("afterend", "<span>Hello world</span>");测试看看‹/›
表格中的数字指定了完全支持insertAdjacentHTML()方法的第一个浏览器版本:
方法 | |||||
insertAdjacentHTML() | 是 | 48 | 是 | 是 | 8 |
参数 | 描述 |
---|---|
position | 相对于元素的位置。 法律价值:
|
text | 要解析为HTML的字符串 |
使用“ beginbegin”值:
var head = document.getElementsByTagName("h2")[0]; head.insertAdjacentHTML("afterbegin", "<span style='color:red;'>Hello world</span>");测试看看‹/›
使用“ beforebegin”值:
var head = document.getElementsByTagName("h2")[0]; head.insertAdjacentHTML("beforebegin", "<span style='color:red;'>Hello world</span>");测试看看‹/›
使用“ beforeend”值:
var head = document.getElementsByTagName("h2")[0]; head.insertAdjacentHTML("beforeend", "<span style='color:red;'>Hello world</span>");测试看看‹/›
HTML DOM参考:element.insertAdjacentElement()方法
HTML DOM参考:element.insertAdjacentText()方法
HTML DOM参考:node.insertBefore()方法
HTML DOM参考:node.appendChild()方法