如何用JS快速替换HTML标签内容？

在网页开发中，动态替换HTML标签内容是常见需求，无论是更新用户界面、加载新数据，还是实现交互效果，JavaScript提供了多种方法,以下是详细解析：

核心方法：innerHTML 和 textContent

1. innerHTML
   直接操作标签内的HTML结构，可解析标签：

   // 替换内容（包含HTML标签）
   document.getElementById("example").innerHTML = "<strong>新内容</strong>";

   特点：

   • 可插入HTML标签
   • 存在XSS攻击风险（避免直接插入用户输入）
   • 触发重绘（频繁操作影响性能）

2. textContent
   仅处理文本内容，自动转义特殊字符：

   // 替换纯文本（自动转义<,>等字符）
   document.querySelector(".text-box").textContent = "安全文本<script>alert(1)</script>";

   特点：

   

   • 防XSS攻击
   • 无法解析HTML标签
   • 性能优于innerHTML

进阶方法

1. innerText（特定场景使用）
   考虑CSS样式，不显示隐藏元素内容：

   // 只替换可见文本
   element.innerText = "新文本";

   注意：非标准属性，性能低于textContent

2. insertAdjacentHTML()
   精准控制插入位置（无需替换整个内容）：

   /* 位置参数：
      'beforebegin': 元素前
      'afterbegin': 元素内部开头
      'beforeend': 元素内部末尾
      'afterend': 元素后
   */
   element.insertAdjacentHTML('beforeend', '<span>追加内容</span>');

安全与陷阱

1. XSS攻击防范
   使用innerHTML时过滤用户输入：

   const userInput = "<script>反面代码</script>";
   // 使用DOMPurify等库过滤
   element.innerHTML = DOMPurify.sanitize(userInput); 

2. 性能优化

   • 避免在循环中使用innerHTML
   • 批量操作使用DocumentFragment：

     const fragment = document.createDocumentFragment();
     fragment.appendChild(newElement);
     parentElement.replaceChildren(fragment);

3. 兼容性

   • textContent兼容IE9+，innerText兼容IE6+
   • 老旧项目可用nodeValue操作文本节点：

     // 替换文本节点的值
     textNode.nodeValue = "新文本";

场景示例

1. 替换多个元素内容

   // 使用forEach遍历
   document.querySelectorAll(".item").forEach(el => {
     el.textContent = "统一内容";
   });

2. 替换表单元素值

   // 特殊表单控件需用value属性
   document.getElementById("input-field").value = "新值";

3. // 三种清空方式
   element.innerHTML = "";
   element.textContent = "";
   element.replaceChildren(); // ES6推荐

最佳实践：

• 优先用textContent处理纯文本
• innerHTML必须配合内容过滤
• 批量操作使用DocumentFragment

本文参考MDN Web Docs[1]及OWASP安全指南[2]，实际开发请结合具体场景选择方法，并始终关注代码安全性与性能优化。

引用说明
[1] MDN Web Docs: Element.innerHTML, Text.textContent
[2] OWASP Cross-Site Scripting (XSS) Prevention Cheat Sheet
[3] Web API标准规范 (https://dom.spec.whatwg.org/)