English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML DOM insertAdjacentHTML() 方法

Objet Element HTML DOM

insertAdjacentHTML()方法将指定的文本解析为HTML,并将结果节点插入指定的位置。

此方法不会重新解析正在使用该元素的元素,因此不会破坏该元素内部的现有元素。

这避免了额外的序列化步骤,使其比直接的innerHTML操作快得多。

语法:

element.insertAdjacentHTML(position, text)
var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("afterend", "<span>Hello world<"/span>
Vérifiez et voyez‹/›

浏览器兼容性

表格中的数字指定了完全支持insertAdjacentHTML()方法的第一个浏览器版本:

方法
insertAdjacentHTML()488

参数值

参数描述
position相对于元素的位置。
法律价值:
  • "afterbegin"-元素开始之后(作为第一个孩子)

  • "afterend"-元素之后

  • "beforebegin"-元素之前

  • "beforeend"-元素结束之前(作为最后一个子元素)

text要解析为HTML的字符串

更多实例

使用“beginbegin”值:

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("afterbegin", "<span style=""39;color:red;'>Hello world</span>
Vérifiez et voyez‹/›

Utilisation de la valeur "beforebegin" :

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("beforebegin", "<span style=")39;color:red;'>Hello world</span>
Vérifiez et voyez‹/›

Utilisation de la valeur "beforeend" :

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("beforeend", "<span style=")39;color:red;'>Hello world</span>
Vérifiez et voyez‹/›

Références associées

Référence HTML DOM :elementMéthode .insertAdjacentElement()

Référence HTML DOM :elementMéthode .insertAdjacentText()

Référence HTML DOM :nodeMéthode .insertBefore()

Référence HTML DOM :nodeMéthode .appendChild()

Objet Element HTML DOM