insertAdjacentHTML() 把傳入的字串解析成 HTML 或 XML,並把該節點插入到 DOM 樹指定的位置。它不會重新解析被使用的元素,因此他不會破壞該元素裡面原有的元素。這避免了序列化的複雜步驟,使得它比直接操作  innerHTML 快上許多。


element.insertAdjacentHTML(position, text);


A DOMString representing the position relative to the element; must be one of the following strings:
  • 'beforebegin': 在 element 之前。
  • 'afterbegin': 在 element 裡面,第一個子元素之前。
  • 'beforeend': 在 element 裡面,最後一個子元素之後。
  • 'afterend': 在 element 之後。
text 是即將被解析並插入到 DOM 樹裡的字串。

Visualization of position names

<!-- beforebegin -->
  <!-- afterbegin -->
  <!-- beforeend -->
<!-- afterend -->
Note:  beforebegin 和 afterend 只在該節點位於 DOM 樹內、並且有母元素時有效。


// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>


Security Considerations

When inserting HTML into a page by using insertAdjacentHTML be careful not to use user input that hasn't been escaped.

It is not recommended you use insertAdjacentHTML when inserting plain text; instead, use the Node.textContent property or Element.insertAdjacentText() method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.


Specification Status Comment
DOM Parsing and Serialization
The definition of 'Element.insertAdjacentHTML()' in that specification.
Working Draft  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 8.0 (8.0) 4.0 7.0 4.0 (527)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 8.0 (8.0) ? ? ?

See also