在所有位置插入 AdjacentHTML

Paul Kinlan

如果我们想在 HTML 文档中插入内容，可以通过以下三种方式实现：

  • 使用 createNode 和 appendChild 等 DOM 方法
  • 使用文档 fragment
  • 使用 innerHTML

有人可能会说，我们还为少数用例提供了 document.write。

innerHTML 已在 HTML5 中标准化，并附带一个兄弟方法 insertAdjacentHTML，该方法的用法与 innerHTML 相同，但允许我们更具体地定义要插入 HTML 内容的位置：beforeBegin、afterBegin、beforeEnd 和 afterEnd。

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

早在 2008 年，John Resig 就撰写了一篇关于 insertAdjacentHTML 的文章，其中得出的结论如下：

到目前为止，insertAdjacentHTML 的主要问题是缺少浏览器支持。从 Firefox 8 开始，Firefox 实现了 insertAdjacentHTML，因此该方法将在所有主要浏览器（包括移动浏览器）中提供。如果您想立即使用它并确保它在 Firefox 8 之前的版本中正常运行，可以使用此polyfill。