HTML | DOM insertAdjacentHTML() 方法

insertAdjacentHTML() 方法使程序员可以在指定的 DOM 元素的指定位置插入一个 HTML 字符串。

该方法有四个不同的位置参数，分别为 "beforebegin"、"afterbegin"、"beforeend" 和 "afterend"，表示插入位置分别为元素前、元素内部开头、元素内部结尾和元素后。

语法

element.insertAdjacentHTML(position, text);

参数

• position：必需，表示要插入的 HTML 字符串的位置。该参数有四个可能的取值，分别为："beforebegin"、"afterbegin"、"beforeend" 和 "afterend"。
• text：必需，表示要插入的 HTML 字符串。

返回值

该方法没有返回值。

示例

在元素的前面插入 HTML：

element.insertAdjacentHTML('beforebegin', '<div>New HTML content</div>');

在元素的内部开头插入 HTML：

element.insertAdjacentHTML('afterbegin', '<div>New HTML content</div>');

在元素的内部结尾处插入 HTML：

element.insertAdjacentHTML('beforeend', '<div>New HTML content</div>');

在元素的后面插入 HTML：

element.insertAdjacentHTML('afterend', '<div>New HTML content</div>');

注意事项

• insertAdjacentHTML() 方法不安全。如果使用了不慎输入的参数，可能会导致 XSS 攻击或其他安全问题。
• 插入的 HTML 字符串必须是有效的 HTML 代码。如果不是，则会引发错误。
• 由于插入的是完整的 HTML 代码串，因此会对浏览器的性能产生一定的影响。不建议大量使用该方法。