本教程详细介绍了如何将 javascript 数组中的数据动态地渲染为 dom 中的无序列表（`
`）的列表项（“）。文章通过构建 html 字符串并利用 `innerhtml` 属性将数据高效地插入到网页中，同时强调了使用 `innerhtml` 时必须注意的跨站脚本（xss）安全风险，并提供了相应的防范建议，确保代码的健壮性和安全性。
引言
在现代 Web 开发中，动态地在网页上展示数据是一项基本技能。当数据存储在 JavaScript 数组中时，常见的需求是将其格式化为 HTML 列表（例如
或 ），以便用户能够清晰地浏览。本教程将指导您如何高效且安全地实现这一目标。
初始设置与问题分析
假设我们有一个 JavaScript 数组，其中存储了一些链接，并且我们希望将这些链接显示在一个无序列表中。以下是基本的 HTML 结构和 JavaScript 代码：
HTML 结构:
JavaScript 初始代码:
立即学习“Java免费学习笔记（深入）”；
let linksArray = []; // 存储链接的数组let inputEl = document.getElementById("input-el"); // 获取输入框元素let displayEl = document.getElementById("display_link-el"); // 获取用于显示列表的 ul 元素// 模拟从 localStorage 加载数据（如果存在）const myLinks = JSON.parse(localStorage.getItem("mylinks"));if (myLinks) { linksArray = myLinks; // 首次加载时也需要渲染列表 displayLinksAsList(); }// 保存输入到数组并更新 localStoragefunction save() { if (inputEl.value) { // 确保输入不为空 linksArray.push(inputEl.value); localStorage.setItem("mylinks", JSON.stringify(linksArray)); inputEl.value = ""; // 清空输入框 displayLinksAsList(); // 调用函数更新 DOM }}// 删除所有链接（示例函数，可根据需求实现）function delLeads() { linksArray = []; localStorage.clear(); displayLinksAsList(); // 清空后更新 DOM}// 初始尝试：将数组转换为列表项（存在问题）function convertToListLi(array) { // 错误示范：这里只是构建了字符串，但没有返回，也没有累积 for (let i = 0; i < array.length; i++) { let linkItem = "在上述初始代码中，convertToListLi 函数并没有正确地构建并返回一个完整的 HTML 字符串，也没有将其应用到 DOM 中。直接将数组赋值给 displayEl.textContent 只会显示数组的字符串表示，而不是渲染 HTML 列表。
正确的解决方案：构建 HTML 字符串并使用 innerHTML
要将数组内容渲染为 HTML 列表，我们需要一个函数来遍历数组，为每个元素生成一个
标签，并将所有这些 标签组合成一个单一的 HTML 字符串。然后，我们将这个字符串赋值给目标 元素的 innerHTML 属性。
核心 JavaScript 修正:
// 函数：将 JavaScript 数组转换为 HTML 列表项字符串function convertToListLi(array) { let listItemsHTML = ""; // 初始化一个空字符串来累积所有列表项 for (let i = 0; i < array.length; i++) { // 拼接每个列表项的 HTML 字符串 listItemsHTML += "工作原理说明:
convertToListLi(array) 函数:
它初始化一个空字符串 listItemsHTML。通过 for 循环遍历传入的 array。在每次迭代中，它将当前数组元素用 和 标签包裹起来，并将其追加到 listItemsHTML 字符串中。循环结束后，listItemsHTML 将包含所有 元素组成的完整 HTML 片段，例如 “Link1Link2″。最后，该函数返回这个构建好的 HTML 字符串。
displayLinksAsList() 函数:
它调用 convertToListLi(linksArray) 来获取用于渲染列表的 HTML 字符串。然后，它将这个 HTML 字符串赋值给 displayEl.innerHTML。innerHTML 属性允许您获取或设置一个元素内部的 HTML 内容。当您设置它时，浏览器会解析您提供的 HTML 字符串，并将其对应的 DOM 元素插入到目标元素（在这里是 displayEl，即 ）中。
完整示例代码
结合 HTML 和修正后的 JavaScript，一个完整的、可运行的示例：
index.html:
JavaScript 数组到 DOM 列表渲染 body { font-family: Arial, sans-serif; margin: 20px; } input { padding: 8px; margin-right: 5px; border: 1px solid #ccc; } button { padding: 8px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; margin-right: 5px; } button:hover { background-color: #0056b3; } #del-btn { background-color: #dc3545; } #del-btn:hover { background-color: #c82333; } ul { list-style-type: disc; padding-left: 20px; border: 1px solid #eee; padding: 10px; margin-top: 15px; } li { margin-bottom: 5px; }动态列表渲染示例
我的链接列表:
script.js:
let linksArray = []; const inputEl = document.getElementById("input-el");const displayEl = document.getElementById("display_link-el");// 函数：将 JavaScript 数组转换为 HTML 列表项字符串function convertToListLi(array) { let listItemsHTML = ""; for (let i = 0; i < array.length; i++) { // 注意：如果 linksArray[i] 可能是用户输入，这里需要进行安全过滤 listItemsHTML += "安全注意事项：跨站脚本 (XSS)
重要提示: 当您使用 innerHTML 属性来插入包含用户提供的数据的 HTML 字符串时，必须格外小心。如果用户输入包含恶意脚本（例如 alert(‘XSS’);），并且您直接将其插入到 DOM 中，那么这些脚本将被执行，这被称为跨站脚本 (XSS) 攻击。
防范措施:
输入验证与净化:
验证: 检查用户输入是否符合预期的格式（例如，是否是一个有效的 URL）。净化: 在将用户输入插入到 innerHTML 之前，对其进行转义或移除所有潜在的恶意 HTML 标签和属性。有许多库可以帮助您完成这项工作，例如 DOMPurify。
示例（使用简单的转义，但推荐使用专业库）：
function escapeHTML(str) { const div = document.createElement('div'); div.appendChild(document.createTextNode(str)); return div.innerHTML;}function convertToListLiSafe(array) { let listItemsHTML = ""; for (let i = 0; i < array.length; i++) { listItemsHTML += "避免使用 innerHTML 处理用户输入: 对于更复杂或安全性要求更高的场景，可以考虑使用 document.createElement()、appendChild() 等 DOM API 来构建元素，而不是拼接 HTML 字符串。这种方法虽然可能代码量稍大，但由于浏览器会正确处理元素创建，可以有效避免许多 XSS 风险。
总结
通过本教程，您应该已经掌握了如何使用 JavaScript 将数组数据动态地渲染为 DOM 中的 HTML 列表。关键在于：
使用循环遍历数组。为每个数组元素构建 标签。将所有 标签拼接成一个完整的 HTML 字符串。将该字符串赋值给目标 元素的 innerHTML 属性。最重要的是，在使用 innerHTML 插入用户输入时，务必进行严格的安全净化，以防范 XSS 攻击。
掌握这一技能将使您能够创建更加动态和交互性的 Web 应用程序。
以上就是在 DOM 中将 JavaScript 数组内容动态渲染为 HTML 列表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1590917.html
微信扫一扫 
支付宝扫一扫 
