在所有位置插入 AdjacentHTML
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
如果我们想在 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。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2011-08-27。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2011-08-27。"],[],[]]