当前位置：首页 > 前端开发 > 正文

JavaScript中如何给innerHTML赋值？

通过JavaScript获取DOM元素后，直接设置其innerHTML属性为HTML格式字符串，即可动态更新元素内容，注意防范XSS安全风险，避免直接插入未处理的用户输入数据。

在 JavaScript 中，innerHTML 是操作网页内容的核心属性之一，它允许开发者动态修改 HTML 元素内部的 DOM 结构，以下是详细操作指南及关键注意事项：

基础赋值方法

语法与示例：

// 1. 获取目标元素
const container = document.getElementById("myDiv");
// 2. 通过innerHTML赋值
container.innerHTML = "<p>新内容已加载！<span class='highlight'>带样式的文本</span></p>";
// 结果：myDiv内部原有内容将被替换为新的段落和带样式的文本

关键特性：

  • 覆盖式更新：赋值时会完全替换元素内原有内容
  • 支持完整 HTML 标签：可直接插入带格式的内容（如 <b>、<img> 等）
  • 实时渲染：浏览器立即解析并显示新内容

安全风险与防御措施（关键！）

XSS 攻击风险：

JavaScript中如何给innerHTML赋值？ 第1张

// 危险示例：用户输入直接拼接
const userInput = "<img src=x onerror='stealCookies()'>";
container.innerHTML = userInput; // 执行反面脚本！

安全实践：

  1. 输入过滤：使用 DOMPurify 库净化内容 
    import DOMPurify from 'dompurify';
container.innerHTML = DOMPurify.sanitize(userInput);
  2. 避免拼接：优先使用 textContent 处理纯文本 
    // 安全替代方案
container.textContent = "用户输入: " + userInput; // 标签会被转义显示

性能优化场景

高效批量更新：

// 一次性构建完整字符串比多次赋值更高效
let htmlString = "";
for (let i = 0; i < 100; i++) {
  htmlString += `<div>Item ${i}</div>`;
}
container.innerHTML = htmlString; // 仅触发1次重绘

不适用场景：

JavaScript中如何给innerHTML赋值？ 第2张

  • 频繁更新：每秒多次操作会引发性能问题
  • 局部修改：只需改文本时用 textContent 更轻量
  • 事件绑定：需要手动重新绑定新元素的事件

替代方案推荐

方法 适用场景 示例
textContent 纯文本插入（自动转义HTML标签） div.textContent = "<script>" → 显示为文本
insertAdjacentHTML 精准位置插入（不破坏现有元素） div.insertAdjacentHTML('beforeend', '<p>追加</p>')
createElement 复杂动态元素 见下方代码示例

createElement 示例：

const newDiv = document.createElement("div");
newDiv.classList.add("alert");
const textNode = document.createTextNode("安全创建的内容");
newDiv.appendChild(textNode);
container.replaceChildren(newDiv); // 替换所有子元素

实际应用案例

动态加载内容：

// AJAX数据渲染
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    const list = data.map(item => `<li>${item.name}</li>`).join("");
    document.getElementById("list").innerHTML = `<ul>${list}</ul>`;
  });

模板整合：

JavaScript中如何给innerHTML赋值？ 第3张

<template id="cardTemplate">
  <div class="card">
    <h2 data-name></h2>
    <img data-image>
  </div>
</template>
<script>
  const template = document.getElementById("cardTemplate").content;
  const card = template.cloneNode(true);
  card.querySelector("[data-name]").textContent = "产品名称";
  card.querySelector("[data-image]").src = "product.jpg";
  container.innerHTML = ""; // 清空容器
  container.appendChild(card);
</script>
  • 优先场景：初始化渲染、静态内容更新、可信任源数据处理
  • 避免场景：用户输入直接渲染、高频更新、需保留事件监听时
  • 安全铁律：永远对第三方内容进行消毒处理
  • 性能准则：集中操作减少重绘次数（参考虚拟DOM原理）

引用说明：本文技术要点参考 MDN Web Docs innerHTML 的权威文档，安全实践符合 OWASP XSS 防护规范，性能建议基于 Google 开发者文档 渲染性能优化指南。

0

相关文章