Create DOM from HTML string

Reference

可以用來以 string 創建 DOM 的方法有

  • Range.createContextualFragnemnt()
  • Element.insertAdjacentHTML()
  • Element.innerHTML
  • DOMParser.parseFromString()

DOMParser.parseFromString()最慢；Range.createContextualFragnemnt() 在 Firefox 最快。

Performance

如果一次要加入多個 nodes，建議使用 DocumentFragment 處例；該 method 只會造成一次 reflow。

Table Column

<theade>、<tbody>、<tr>、<td> 只能被置放在相關的父節點中，例如：<tbody> 只能被置入於 <table> 中；其他情況話會返回 null。

Script Execution

  • 除了 Range.createContextualFragnemnt() 外，其他方法皆會防止插入/執行 <script>。

  • <img onerror="alert(!)" /> 中的 onError 會被執行，需要手動移除。

Range.createContextualFragnemnt()

!! 會執行 script tag !!

const range = document.createRange()
const template = range.createContextualFragment('<div>Content</div>')
someElement.appendChild(template)

Element.insertAdjacentHTML()

someElement.insertAdjacentHTML('beforeEnd', '<div>Content</div>')

第一個參數為插入 DOM 的位置

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Element.innerHTML

會造成 Element 本身也重新渲染，效能上會比 Element.insertAdjacentHTML() 差一點。

someElement.innerHTML = '<div>Content</div>'

DOMParse.parseFromString()

const parser = new DOMParser()
const element = parser.parseFromString('<div>Content</div>', 'text/html')
someElement.appendElement(element)