如要在 HTML 文件中插入內容,有三種方法可以選用:
- 使用
createNode
和appendChild
等 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。