本教程旨在指导开发者如何将javascript数组中的数据动态地渲染到dom中的无序列表（`
- `）作为列表项（`
- `）。我们将通过详细的示例代码，学习如何遍历数组、构建html字符串，并安全高效地更新页面内容，特别强调了使用`innerhtml`时的安全注意事项。
在现代Web开发中，经常需要将动态数据（例如从API获取或用户输入）展示在页面上。JavaScript数组是存储这类数据的常用结构，而将数组内容以列表形式展示在DOM中，是实现这一需求的基本操作。本教程将详细介绍如何实现这一功能。
核心概念：将数组数据转换为DOM列表
要将JavaScript数组中的元素转换为DOM中的列表项，主要涉及以下几个步骤：
- 获取数据源： 准备一个包含待显示数据的JavaScript数组。
- 遍历数组： 迭代数组中的每个元素。
- 构建HTML字符串： 在遍历过程中，为每个数组元素创建对应的HTML <li> 标签字符串。
- 更新DOM： 将所有生成的 <li> 标签字符串组合成一个完整的HTML字符串，然后将其插入到目标 <ul> 元素的 innerHTML 属性中。
示例代码
我们将通过一个实际的例子来演示如何实现这一过程。假设我们有一个输入框用于添加链接，并希望将这些链接收集到一个数组中，然后实时显示在一个无序列表中。
HTML 结构
首先，定义页面所需的HTML元素，包括一个输入框、两个按钮和一个用于显示列表的 <ul> 元素。
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态渲染列表教程</title> </head> <body> <input id="input-el" title="lead" placeholder="输入链接" type="text"> <button id="input-btn">保存链接</button> <button id="del-btn">删除所有</button> <div> <h3>我的链接列表：</h3> <ul id="display_link-el"></ul> </div> <script src="app.JS"></script> </body> </html>
JavaScript 逻辑
接下来，编写JavaScript代码来处理数据存储、列表转换和DOM更新。
// app.js let linksArray = []; // 用于存储链接的数组 const inputEl = document.getElementById("input-el"); // 获取输入框元素 const inputBtn = document.getElementById("input-btn"); // 获取保存按钮 const delBtn = document.getElementById("del-btn"); // 获取删除按钮 const displayEl = document.getElementById("display_link-el"); // 获取用于显示列表的 ul 元素 // 尝试从 localStorage 加载数据（如果存在） const storedLinks = json.parse(localStorage.getItem("mylinks")); if (storedLinks) { linksArray = storedLinks; renderLinks(); // 页面加载时渲染已保存的链接 } // 监听保存按钮点击事件 inputBtn.addEventListener("click", function() { saveLink(); }); // 监听删除按钮双击事件 delBtn.addEventListener("dblclick", function() { clearLinks(); }); // 保存链接到数组和 localStorage function saveLink() { if (inputEl.value.trim() !== "") { // 确保输入不为空 linksArray.push(inputEl.value.trim()); inputEl.value = ""; // 清空输入框 localStorage.setItem("mylinks", JSON.stringify(linksArray)); // 保存到 localStorage renderLinks(); // 重新渲染列表 } } // 清除所有链接 function clearLinks() { linksArray = []; localStorage.clear(); // 清除 localStorage renderLinks(); // 重新渲染列表（将为空） } // 将 linksArray 转换为 HTML 列表字符串 function convertToListHtml(arr) { let listItems = ""; // 用于累积所有 <li> 标签的字符串 for (let i = 0; i < arr.length; i++) { // 拼接每个 <li> 标签，包含数组元素 listItems += `<li>${arr[i]}</li>`; } return listItems; // 返回完整的 HTML 列表字符串 } // 渲染链接到 DOM function renderLinks() { // 调用 convertToListHtml 函数生成 HTML 字符串 const htmlList = convertToListHtml(linksArray); // 将生成的 HTML 字符串赋值给 ul 元素的 innerHTML displayEl.innerHTML = htmlList; }代码解析
- DOM 元素获取：document.getElementById() 用于获取HTML中具有特定ID的元素，以便在JavaScript中对其进行操作。
- linksArray： 这是一个全局数组，用于存储用户输入的链接。
- saveLink() 函数：
- 当用户点击“保存链接”按钮时，此函数会被调用。
- 它将 inputEl.value（输入框中的文本）添加到 linksArray 中。
- inputEl.value = “” 清空输入框，提供更好的用户体验。
- localStorage.setItem(“mylinks”, JSON.stringify(linksArray)) 将更新后的 linksArray 转换为JSON字符串并存储在浏览器的本地存储中，以便在页面刷新后数据仍能保留。
- 最后调用 renderLinks() 来更新DOM显示。
- convertToListHtml(arr) 函数：
- 这是核心的列表转换函数。
- 它初始化一个空字符串 listItems。
- 使用 for 循环遍历传入的数组 arr。
- 在每次循环中，将当前数组元素包裹在 <li> 标签中，并将其追加到 listItems 字符串中。
- 循环结束后，返回包含所有 <li> 标签的完整HTML字符串。
- renderLinks() 函数：
- 此函数负责将 linksArray 的内容实际显示在页面上。
- 它调用 convertToListHtml(linksArray) 来获取生成的HTML列表字符串。
- 最关键的一步是 displayEl.innerHTML = htmlList;。这将 displayEl (即 <ul> 元素) 的内部HTML内容替换为 htmlList 字符串。浏览器会自动解析这个字符串并创建相应的DOM元素。
注意事项
- xss 安全警告： 当使用 innerHTML 将用户输入的数据直接插入到DOM中时，存在跨站脚本攻击（XSS）的风险。恶意用户可能会输入包含可执行脚本的字符串，例如 <script>alert(‘XSS’);</script>。如果这些脚本未经处理就插入到页面中，它们就会被执行。 最佳实践： 在将任何用户输入的数据赋值给 innerHTML 之前，务必对其进行严格的过滤和编码，以移除或转义潜在的恶意HTML或JavaScript代码。对于本教程的简单示例，我们直接使用了 innerHTML，但在生产环境中，强烈建议使用DOM操作方法（如 document.createElement() 和 appendChild()）或成熟的JavaScript库/框架（它们通常内置了XSS防护机制）来处理用户生成的内容。
- 性能考量： 对于包含大量元素的数组，频繁地修改 innerHTML 可能会导致一定的性能开销，因为浏览器需要重新解析整个HTML字符串并重建DOM。在处理非常大的数据集时，考虑使用 document.createElement() 动态创建元素并通过 appendChild() 插入，或者使用文档片段（DocumentFragment）来减少DOM操作次数。
- 代码可读性： 使用模板字符串（“）来拼接HTML字符串，可以使代码更清晰易读，尤其是在包含变量时。
总结
本教程详细介绍了如何将JavaScript数组中的数据动态地渲染为DOM中的列表项。通过理解数组遍历、HTML字符串构建以及 innerHTML 的使用，您可以有效地在网页上展示动态数据。同时，我们强调了在使用 innerHTML 时必须注意XSS安全问题，并建议在生产环境中采取更安全的DOM操作方法。掌握这些基础知识是进行更复杂前端开发的关键一步。
