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

JavaScript中如何给innerHTML赋值？

admin
前端开发
2025-06-21
4

通过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内部原有内容将被替换为新的段落和带样式的文本

关键特性：

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

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

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

XSS 攻破风险：

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

安全实践：

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

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

性能优化场景

高效批量更新：

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

不适用场景：

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

替代方案推荐

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

createElement 示例：

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

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>`; });

模板整合：

<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>