在前端开发中，经常需要动态地向页面添加内容并修改已有内容。为了方便实现这些操作，我们可以使用标记增强技术。
标记增强的概念
标记增强是指在原有标记语言的基础上，通过扩展或修改标记语言来增加新的功能。HTML 是一种常见的标记语言，在其基础上可通过 JavaScript 来对页面进行增强操作。
使用 innerHTML 进行标记增强
innerHTML 属性可用于获取或设置元素的 HTML 内容。使用 innerHTML 可以很方便地向页面中添加内容，并且可以直接将字符串转换成 HTML 标记。
例如：
--- ------- - ----------------------------------- ----------------- - ------------------
使用 createDocumentFragment 进行标记增强
createDocumentFragment 是一种轻量级的文档对象，它提供了一种高效的方式来添加和修改多个元素。由于 createDocumentFragment 是一个独立的文档对象，当添加或修改多个元素时，它只会触发一次浏览器渲染，从而提高了性能。
例如：
--- -------- - ---------------------------------- --- ---- - - -- - - --- ---- - --- -- - ----------------------------- -------------- - ---- - - -- ------------------------- - ------------------------------------------------------
使用 insertAdjacentHTML 进行标记增强
insertAdjacentHTML 是一种更加灵活的动态添加内容的方法，可以在指定元素之前、之后、作为其子节点等不同位置插入 HTML 标记。该方法接受两个参数：插入位置和要插入的 HTML 标记。
例如：
--- ------- - ----------------------------------- --------------------------------------- -------------------
结语
标记增强技术可以方便地对页面进行动态修改和增强，提高了开发效率并且提供了更好的用户体验。需要注意的是，在使用标记增强技术时，应尽可能避免 XSS 攻击等安全问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12615