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