动态添加内容的标记增强

在前端开发中，经常需要动态地向页面添加内容并修改已有内容。为了方便实现这些操作，我们可以使用标记增强技术。

标记增强的概念

标记增强是指在原有标记语言的基础上，通过扩展或修改标记语言来增加新的功能。HTML 是一种常见的标记语言，在其基础上可通过 JavaScript 来对页面进行增强操作。

使用 innerHTML 进行标记增强

innerHTML 属性可用于获取或设置元素的 HTML 内容。使用 innerHTML 可以很方便地向页面中添加内容，并且可以直接将字符串转换成 HTML 标记。

例如：

let element = document.getElementById("example");
element.innerHTML = "<h1>这是一个示例</h1>";

使用 createDocumentFragment 进行标记增强

createDocumentFragment 是一种轻量级的文档对象，它提供了一种高效的方式来添加和修改多个元素。由于 createDocumentFragment 是一个独立的文档对象，当添加或修改多个元素时，它只会触发一次浏览器渲染，从而提高了性能。

例如：

let fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  let li = document.createElement("li");
  li.textContent = "列表项 " + i;
  fragment.appendChild(li);
}
document.getElementById("list").appendChild(fragment);

使用 insertAdjacentHTML 进行标记增强

insertAdjacentHTML 是一种更加灵活的动态添加内容的方法，可以在指定元素之前、之后、作为其子节点等不同位置插入 HTML 标记。该方法接受两个参数：插入位置和要插入的 HTML 标记。

例如：

let element = document.getElementById("example");
element.insertAdjacentHTML("beforeend", "<h1>这是一个示例</h1>");

结语

标记增强技术可以方便地对页面进行动态修改和增强，提高了开发效率并且提供了更好的用户体验。需要注意的是，在使用标记增强技术时，应尽可能避免 XSS 攻击等安全问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12615