修改html元素内容最直接的方法是使用innerhtml，但存在xss风险且性能较低；1. innerhtml：可插入html字符串，但有安全风险；2. textcontent：仅处理纯文本，安全且高效，无法解析html；3. createelement结合appendchild：安全且精确控制dom，但代码复杂；4. insertadjacenthtml：可指定插入位置，性能优于innerhtml，但仍需防范xss。避免xss的方法包括输入验证、输出转义（如使用dompurify）、启用csp、优先使用textcontent、采用自动转义的模板引擎。textcontent与innertext的区别在于：textcontent获取所有文本（含隐藏元素），是标准属性且性能好；innertext仅获取可见文本，非标准且需布局计算。此外，dom操作还包括创建、删除元素，增删属性和类名，查询、遍历元素及事件监听，建议减少频繁操作以提升性能，可使用documentfragment优化批量处理，以上方法共同实现动态网页交互。

改变HTML元素内容，最直接的方法就是使用JavaScript的

innerHTML

innerHTML

使用

innerHTML

解决方案：

立即学习“前端免费学习笔记（深入）”；

直接修改HTML元素内容主要有以下几种方法，各有优缺点：

1. innerHTML

   ： 这是最常用的方法，可以将一个HTML字符串解析为DOM节点并插入到指定元素中。

   const element = document.getElementById('myElement');
   element.innerHTML = '
   Hello World!
   This is a paragraph.
   ';

   优点： 简单易用，快速替换元素内的所有内容。

   缺点： 存在XSS（跨站脚本攻击）风险，如果

   innerHTML

   的内容来自用户输入或不可信来源，可能导致恶意脚本执行。此外，每次使用

   innerHTML

   都会重新解析整个元素及其子元素，性能开销较大。

2. textContent

   ： 设置或获取元素的文本内容。

   const element = document.getElementById('myElement');
   element.textContent = 'Hello World!';

   优点： 安全，会将所有内容视为纯文本，不会解析HTML标签，因此可以有效防止XSS攻击。性能较好，只修改文本内容。

   缺点： 只能设置或获取文本内容，无法插入HTML标签。

3. createElement

   、

   createTextNode

   、

   appendChild

   ： 通过DOM API创建元素和文本节点，然后添加到指定元素中。

   const element = document.getElementById('myElement');
   const heading = document.createElement('h1');
   const headingText = document.createTextNode('Hello World!');
   heading.appendChild(headingText);
   element.appendChild(heading);
   
   const paragraph = document.createElement('p');
   const paragraphText = document.createTextNode('This is a paragraph.');
   paragraph.appendChild(paragraphText);
   element.appendChild(paragraph);

   优点： 安全，可以精确控制DOM结构，避免XSS攻击。性能相对较好，只创建和添加必要的节点。

   

   炉米Lumi

   字节跳动推出的AI模型分享社区和模型训练平台

   下载

   缺点： 代码相对复杂，需要编写较多的代码才能实现简单的功能。

4. insertAdjacentHTML

   ： 在指定元素的指定位置插入HTML字符串。

   const element = document.getElementById('myElement');
   element.insertAdjacentHTML('beforeend', '
   Hello World!
   This is a paragraph.
   ');

   优点： 相对

   innerHTML

   ，可以更精确地控制插入位置，避免重新解析整个元素。

   缺点： 仍然存在XSS风险，需要谨慎处理插入的内容。

如何避免innerHTML带来的XSS攻击？

避免

innerHTML

• 输入验证： 限制用户输入的内容类型和格式。例如，只允许输入特定字符、数字或预定义的选项。
• 输出编码/转义： 在将数据插入到HTML之前，对特殊字符进行转义。可以使用现成的库，例如DOMPurify，它可以自动移除恶意代码，或者手动进行转义，例如将

  <

  转义为

  zuojiankuohaophpcn

  ，

  >

  转义为

  youjiankuohaophpcn

  。
• 内容安全策略 (CSP)： 配置CSP可以限制浏览器加载和执行的资源，从而降低XSS攻击的风险。CSP可以通过HTTP头部或HTML的
  标签进行设置。
• 使用

  textContent

  代替

  innerHTML

  ： 如果只需要设置或获取文本内容，优先使用

  textContent

  ，因为它会自动将所有内容视为纯文本，避免解析HTML标签。
• 使用模板引擎： 一些模板引擎（例如Handlebars、Mustache）提供了自动转义的功能，可以有效地防止XSS攻击。

textContent

和

innerText

有什么区别？

textContent

innerText

• textContent

  ： 获取元素及其所有后代元素的文本内容，包括隐藏的元素（例如，

  display: none

  的元素）和