在所有位置插入 AdjacentHTML

保罗·金兰

如果要在 HTML 文档中插入内容，有三种方法：

  • 使用 DOM 方法（如 createNode 和 appendChild）
  • 使用文档 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 的主要问题还是缺少浏览器支持。从版本 8 开始，Firefox 会实现 insertAdjacentHTML，以支持所有主流浏览器，包括移动浏览器。如果您想立即使用它并确保它在 Firefox 8 之前的版本中能够正常运行，则可以使用此 polyfill。