在前端页面开发中，经常需要将JavaScript数组存储的数据动态渲染到HTML的无序列表或有序列表中，比如展示用户列表、商品列表等场景。不合理的实现方式可能导致DOM操作频繁引发性能问题，或者引入XSS安全风险，因此需要遵循正确的实践方案。
常见的错误做法
很多新手开发者会采用字符串拼接的方式，直接修改innerHTML属性，这种方式存在明显的问题：
- 每次拼接都会触发DOM重新渲染，数组元素较多时性能损耗严重
- 如果数组元素包含用户输入的内容，直接拼接可能导致XSS攻击
- 字符串拼接的代码可读性差，后续维护成本高
以下是错误做法的示例代码：
// 错误示例：字符串拼接修改innerHTML
const dataArr = ['苹果', '香蕉', '橙子'];
const ulElement = document.getElementById('fruit-list');
let htmlStr = '';
dataArr.forEach(item => {
htmlStr += `<li>${item}</li>`;
});
ulElement.innerHTML = htmlStr;
推荐的正确实践方案
正确的做法应该遵循DOM批量操作、避免直接拼接用户输入内容的原则，核心步骤分为三步：
- 创建文档片段
DocumentFragment作为临时容器，减少DOM重绘次数 - 遍历数组，为每个元素创建对应的
<li>节点，设置文本内容而非HTML内容 - 将文档片段一次性插入到目标列表中
基础实现代码示例
以下是通用的正确实现代码：
// 正确示例：使用DocumentFragment批量操作DOM
const dataArr = ['苹果', '香蕉', '橙子'];
const ulElement = document.getElementById('fruit-list');
// 创建文档片段，作为临时容器
const fragment = document.createDocumentFragment();
dataArr.forEach(item => {
// 创建li元素节点
const liNode = document.createElement('li');
// 设置文本内容，避免XSS风险
liNode.textContent = item;
// 将li节点添加到文档片段中
fragment.appendChild(liNode);
});
// 一次性将文档片段插入到ul中，只触发一次DOM更新
ulElement.appendChild(fragment);
适配动态更新的场景
如果数组是动态变化的，需要在原有列表基础上追加新元素，只需要复用上面的逻辑，不需要清空原有列表内容：
// 动态追加数组元素到列表的示例
const newData = ['葡萄', '西瓜'];
const ulElement = document.getElementById('fruit-list');
const fragment = document.createDocumentFragment();
newData.forEach(item => {
const liNode = document.createElement('li');
liNode.textContent = item;
fragment.appendChild(liNode);
});
ulElement.appendChild(fragment);
处理包含特殊字符的数组元素
如果数组元素中包含<、>等特殊字符，使用textContent属性会自动转义，不会出现解析错误或者安全问题：
// 包含特殊字符的数组渲染示例
const specialArr = ['<div>测试</div>', '张三&李四'];
const ulElement = document.getElementById('test-list');
const fragment = document.createDocumentFragment();
specialArr.forEach(item => {
const liNode = document.createElement('li');
liNode.textContent = item;
fragment.appendChild(liNode);
});
ulElement.appendChild(fragment);
不同场景的方案选择
可以根据实际的数组规模和场景选择合适的实现方式：
| 场景 | 推荐方案 | 优势 |
|---|---|---|
| 数组元素较少（小于100条） | 直接遍历创建节点插入 | 代码简单，实现成本低 |
| 数组元素较多（大于100条） | DocumentFragment批量操作 | 减少DOM重绘，性能更优 |
| 需要支持旧浏览器（如IE9及以下） | 使用createElement循环插入 | 兼容性更好 |
注意事项
- 不要直接在循环中修改
innerHTML或者调用appendChild插入到目标列表，会导致多次DOM更新 - 如果数组元素是用户输入的内容，绝对不要使用
innerHTML赋值，避免XSS攻击 - 如果需要在列表渲染完成后执行后续逻辑，可以在
appendChild(fragment)之后添加对应的代码，因为DOM操作是同步的
正确的DOM操作实践可以有效提升页面性能，减少潜在的安全风险，在实际开发中应该养成规范操作的习惯，避免为了省事采用拼接字符串的不合理方式。
JavaScriptHTML_列表数组操作DOM操作修改时间：2026-06-29 06:00:29