本教程详细阐述了如何使用 javascript 将数组中的数据动态渲染为 html dom 元素。文章首先分析了直接重复添加同一 dom 元素所导致的常见问题及其原因，随后深入讲解了如何利用 `clonenode(true)` 方法高效且正确地创建和追加多个 dom 元素，以避免元素实例的唯一性限制。通过具体的代码示例，读者将掌握在 web 开发中进行列表或网格渲染的核心技巧。
在现代 Web 开发中，动态生成和管理 HTML 内容是 JavaScript 的核心应用之一。当我们需要根据数组中的数据来渲染一系列相似的 DOM 元素时，例如构建游戏棋盘、商品列表或评论区，正确地操作 DOM 至关重要。本教程将指导您如何有效地遍历 JavaScript 数组，并将结果渲染到 HTML 容器中。
首先，我们需要一个基本的 HTML 结构来承载动态生成的元素，并定义一些 CSS 样式来美化它们。
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>动态 DOM 渲染示例</title>
</head>
<body>
<div class="container">
<!-- 动态生成的元素将添加到这里 -->
</div>
<script src="script.js"></script>
</body>
</html>CSS (style.css):
立即学习“Java免费学习笔记（深入）”；
.container {
display: grid; /* 使用 Grid 布局方便排列单元格 */
grid-template-columns: repeat(3, 1fr); /* 3列 */
gap: 5px; /* 单元格间距 */
height: 300px;
width: 300px;
border: 1px solid #ccc;
margin: 20px;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
height: 90px; /* 调整高度以适应容器和间距 */
width: 90px; /* 调整宽度 */
background-color: #333;
color: white;
font-size: 2em;
border: 1px solid #555;
}接下来是 JavaScript 部分，我们将创建一个数组并尝试将其内容渲染到 .container 元素中。
一个常见的错误是创建单个 DOM 元素，然后尝试在循环中重复将其添加到父容器。
// script.js
const game = () => {
// 其他游戏逻辑...
return {};
};
var gameBoard = [];
// 创建一个 DOM 元素实例
var cellTemplate = document.createElement('div');
cellTemplate.innerText = "X";
cellTemplate.classList.add('cell'); // 添加样式类
// 填充 gameBoard 数组
var createBoard = () => {
for (let i = 0; i < 9; i++) {
// 这里只是将同一个 cellTemplate 引用添加到数组，
// 实际上数组中存储的是同一个 DOM 元素的引用。
gameBoard.push(cellTemplate);
}
return gameBoard;
};
createBoard(); // 执行创建棋盘
var container = document.getElementsByClassName("container")[0]; // 获取容器元素
// 错误示范：尝试直接重复添加同一个 cellTemplate 实例
// 这会导致只有一个 cell 最终显示，因为它每次被 appendChild 时，
// 都会从旧位置移除并添加到新位置。
for (var i = 0; i < gameBoard.length; i++){
// 错误之处：直接使用 cellTemplate 引用
// 每次循环都会把同一个 cellTemplate 元素从其当前父节点（如果有）
// 移动到 container 中。因此，循环结束后，container 中只有一个元素，
// 并且是最后一个被追加的。
container.appendChild(gameBoard[i]);
}
// 另一个常见的语法错误示例（原始问题中出现）：
// container[0].parentElement,appendChild(cell)
// 逗号运算符会先执行左侧表达式，然后返回右侧表达式的值。
// 在这里，它会尝试对 container[0].parentElement 进行某种操作（但实际上只是计算其值），
// 然后将 appendChild(cell) 视为一个表达式。这通常会导致语法错误或不符合预期的行为。为什么会出错？
在 JavaScript 中，DOM 元素是唯一的实例。当您调用 parentNode.appendChild(childNode) 时，如果 childNode 已经存在于 DOM 树中，它会被从当前位置移除，然后添加到新的父节点下。这意味着您不能通过简单地将同一个元素实例多次添加到父容器来创建多个副本。每次循环，cellTemplate 都会被“移动”到容器的末尾，最终容器中只会留下一个元素。
要解决这个问题，我们需要在每次循环中创建或复制一个新的 DOM 元素实例。最有效的方法是创建一个模板元素，然后在循环中使用 cloneNode(true) 方法来创建它的深拷贝。
cloneNode(true) 方法会创建一个元素的副本，true 参数表示进行深拷贝，即复制元素及其所有子节点和属性。如果传入 false 或省略，则只进行浅拷贝（只复制元素本身，不复制子节点）。
// script.js (修正后的代码)
const game = () => {
// 其他游戏逻辑...
return {};
};
var gameBoard = [];
// 创建一个 DOM 元素模板
var cellTemplate = document.createElement('div');
cellTemplate.innerText = "X";
cellTemplate.classList.add('cell'); // 添加样式类
// 填充 gameBoard 数组 (这里仍然只是填充引用，但我们会在渲染时处理)
var createBoard = () => {
for (let i = 0; i < 9; i++) {
// 实际上，对于这种场景，gameBoard 数组可以存储数据，
// 而不是 DOM 元素的引用。这里我们为了与原问题保持一致，
// 仍然存储 cellTemplate 的引用，但关键在于渲染逻辑。
gameBoard.push({ id: i, content: `Cell ${i+1}` }); // 存储数据对象更合理
}
return gameBoard;
};
createBoard(); // 执行创建棋盘数据
var container = document.getElementsByClassName("container")[0]; // 获取容器元素
// 正确示范：在循环中克隆节点并追加
for (var i = 0; i < gameBoard.length; i++){
// 克隆 cellTemplate 元素，true 表示深拷贝，包括文本内容和 class
var newCell = cellTemplate.cloneNode(true);
// 如果 gameBoard 存储的是数据，可以在这里更新克隆元素的属性
newCell.innerText = gameBoard[i].content; // 根据数据更新内容
// 将新的克隆元素追加到容器中
container.appendChild(newCell);
}
// 完整的 JavaScript 代码示例：
/*
const game = () => {
const myTest = () => console.log('test');
// game board
return { };
};
var gameBoard = [];
var cell = document.createElement('div');
cell.innerText = "X" // 原始问题中是 "x"
cell.classList.add('cell'); // 添加 class 以应用样式
// adds 9 cells to game board
var createBoard = () => {
for (let i = 0; i < 9; i++) {
// 在这种情况下，gameBoard 存储的都是同一个 cell 元素的引用
// 这对后续的渲染操作没有直接影响，因为我们会在循环中克隆
gameBoard.push(cell);
}
return gameBoard;
}
createBoard()
var container = document.getElementsByClassName("container")[0]; // 确保获取到第一个元素
// container[0].parentElement,appendChild(cell) // 此行是语法错误且不需要，已注释
for (var i = 0; i < gameBoard.length; i++){
// 关键：每次循环都克隆一个新节点
container.appendChild(cell.cloneNode(true))
}
*/DOM 元素唯一性： 记住 DOM 元素是唯一的实例。如果您需要多个外观相同的元素，必须创建多个实例（通过 createElement 或 cloneNode）。
cloneNode(true) vs cloneNode(false)：
获取 DOM 元素： document.getElementsByClassName() 返回的是一个 HTMLCollection (类似数组)。即使只有一个元素，也需要通过索引（如 [0]）来访问它。
性能优化： 对于需要添加大量 DOM 元素的场景（例如几百甚至上千个），频繁地操作 DOM 可能会导致性能问题。此时可以考虑以下优化：
使用 DocumentFragment 的示例：
var fragment = document.createDocumentFragment();
for (var i = 0; i < gameBoard.length; i++) {
var newCell = cellTemplate.cloneNode(true);
newCell.innerText = gameBoard[i].content; // 假设 gameBoard 存储数据
fragment.appendChild(newCell);
}
container.appendChild(fragment); // 一次性将所有元素添加到 DOM数据与视图分离： 最佳实践是将数据（如 gameBoard 数组）与视图（DOM 元素）分离。gameBoard 应该存储纯粹的数据对象，而不是 DOM 元素的引用。在渲染时，根据这些数据动态创建或更新 DOM 元素。
通过本教程，您应该已经掌握了使用 JavaScript 遍历数组并动态渲染 DOM 元素的正确方法。核心在于理解 DOM 元素的唯一性，并利用 cloneNode(true) 来创建元素的副本。结合 HTML 和 CSS 的初始设置，您可以高效且灵活地构建各种动态 Web 界面。在处理大量元素时，考虑使用 DocumentFragment 进行性能优化，并始终遵循数据与视图分离的原则，以编写出更健壮、可维护的代码。
以上就是JavaScript 数组循环与 DOM 元素动态渲染教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
702
收藏
