在所有位置插入 AdjacentHTML

Paul Kinlan

如果要在 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。