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

如何添加innerHTML？

admin
前端开发
2025-06-18
6

innerHTML属性用于获取或设置HTML元素的内部HTML内容，通过直接赋值新HTML字符串，可动态添加元素或文本，如：element.innerHTML += ”，注意这会覆盖原有内容，需用+=追加。

innerHTML 是 JavaScript 中操作 DOM 元素内容的核心属性，它允许开发者动态添加、修改或替换 HTML 内容，以下是详细使用指南：

innerHTML 基础用法

通过 innerHTML 可直接插入 HTML 字符串到指定元素中：

如何添加innerHTML？第1张

的三种场景

覆盖写入

直接赋值会替换元素内所有原有内容：

document.body.innerHTML = "<h1>页面标题</h1>";

增量追加

使用运算符追加内容（效率较低，适合简单场景）：

如何添加innerHTML？第2张

高效批量添加

先拼接完整 HTML 字符串，再一次性写入（推荐）：

const items = ["苹果", "香蕉", "橙子"]; let htmlString = ""; items.forEach(item => { htmlString += `<li>${item}</li>`; // 内存中拼接 }); list.innerHTML = htmlString; // 单次写入减少重绘

安全风险与防御（XSS 攻破）

innerHTML 会解析字符串中的 HTML 标签，可能执行恶意脚本：

如何添加innerHTML？第3张

// 危险示例：用户输入直接插入 userInput = "<img src='x' onerror='stealData()'>"; container.innerHTML = userInput; // 触发恶意代码

防御方案：

转义特殊字符：将 <, >, &, 等转换为实体编码（如 <）
使用专用库： // 使用 DOMPurify 库过滤 const cleanHTML = DOMPurify.sanitize(userInput); container.innerHTML = cleanHTML;
避免直接插入用户输入,优先使用 textContent（见下文）。

innerHTML 与 textContent 的区别

特性	innerHTML	textContent
处理方式	解析 HTML 标签	视为纯文本
显示效果	标签会被渲染	标签以文本形式显示（如 <p>）
安全性	有 XSS 风险	自动转义，安全
性能	解析 HTML 消耗资源	更高效率

使用建议：

仅需插入文本时 → 用 textContent
需插入带样式的复杂结构（如表格、按钮）→ 用 innerHTML

最佳实践

批量操作：减少 innerHTML 赋值次数，避免重复渲染。
模板字符串：利用反引号 ` 创建多行 HTML： container.innerHTML = ` <div class="card"> <h3>${title}</h3> <p>${content}</p> </div> `;
复杂场景用 DOM API：创建 createElement 和 appendChild 更可控。
服务端渲染：对不可信内容，优先在服务端渲染再插入。