在所有位置插入 Adjacent

如要在 HTML 文件中插入內容,有三種方法可以選用:

  • 使用 createNodeappendChild 等 DOM 方法
  • 使用文件片段
  • 使用了 innerHTML

我們可以明確指出,我們還有一些用途的 document.write

innerHTML 已在 HTML5 中標準化,並使用近似方法 insertAdjacentHTML 且可作為 innerHTML 運作,但可讓我們更明確定義要插入 HTML 內容的位置:beforestart、after、beforeEnd 和 afterEnd。

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

早在 2008 年,John Resig 寫了 insertAdjacentHTML 的結論:

截至目前為止,insertAdjacentHTML 的主要問題在於缺乏瀏覽器支援功能。自第 8 版起,Firefox 實作 InsertAdjacentHTML 現已開放給所有的主要瀏覽器,包括行動瀏覽器。如要立即使用,並確保它支援在 Firefox 8 以下版本,您可以使用這個 polyfill