本教程详细介绍了如何将 javascript 数组中的数据动态地渲染为 dom 中的无序列表（`

`）的列表项（`
• `）。文章通过构建 html 字符串并利用 `innerhtml` 属性将数据高效地插入到网页中，同时强调了使用 `innerHTML` 时必须注意的跨站脚本（xss）安全风险，并提供了相应的防范建议，确保代码的健壮性和安全性。
  

  引言

  在现代 Web 开发中，动态地在网页上展示数据是一项基本技能。当数据存储在 JavaScript 数组中时，常见的需求是将其格式化为 HTML 列表（例如 <ul> 或 <ol>），以便用户能够清晰地浏览。本教程将指导您如何高效且安全地实现这一目标。

  初始设置与问题分析

  假设我们有一个 JavaScript 数组，其中存储了一些链接，并且我们希望将这些链接显示在一个无序列表中。以下是基本的 HTML 结构和 JavaScript 代码：

  HTML 结构:

  <input id="input-el" title="lead" placeholder="input weblink" type="text"> <button id="input-btn" onclick="save()">SAVE</button> <button id="del-btn" ondblclick="delLeads()">DELETE</button> <div>   <div>     <ul id="display_link-el"></ul>   </div>   <div>     <ul id="log_link-el"></ul>   </div> </div>

  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();  }  // 保存输入到数组并更新 localStorage function 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 = "<li>" + array[i] + "</li>";     // console.log(linkItem); // 仅仅打印，并未用于 DOM 更新   }   // 此外，如果直接使用 displayEl.textContent = linksArray;   // 会将整个数组转换为一个字符串，并显示逗号分隔的原始数据，而不是 HTML 列表。 }  // 用于显示链接的函数（待完善） function displayLinksAsList() {   // 这里需要调用一个能正确生成 HTML 字符串的函数   // 然后将其赋值给 displayEl.innerHTML }

  在上述初始代码中，convertToListLi 函数并没有正确地构建并返回一个完整的 HTML 字符串，也没有将其应用到 DOM 中。直接将数组赋值给 displayEl.textContent 只会显示数组的字符串表示，而不是渲染 HTML 列表。

  正确的解决方案：构建 HTML 字符串并使用 innerHTML

  要将数组内容渲染为 HTML 列表，我们需要一个函数来遍历数组，为每个元素生成一个 <li> 标签，并将所有这些 <li> 标签组合成一个单一的 HTML 字符串。然后，我们将这个字符串赋值给目标 <ul> 元素的 innerHTML 属性。

  核心 JavaScript 修正:

  // 函数：将 JavaScript 数组转换为 HTML 列表项字符串 function convertToListLi(array) {   let listItemsHTML = ""; // 初始化一个空字符串来累积所有列表项   for (let i = 0; i < array.length; i++) {     // 拼接每个列表项的 HTML 字符串     listItemsHTML += "<li>" + array[i] + "</li>";   }   return listItemsHTML; // 返回包含所有列表项的完整 HTML 字符串 }  // 函数：更新 DOM 中的链接列表显示 function displayLinksAsList() {   // 调用 convertToListLi 函数获取 HTML 字符串   const listHTML = convertToListLi(linksArray);   // 将生成的 HTML 字符串赋值给 ul 元素的 innerHTML 属性   // 这样浏览器会将字符串解析为 DOM 元素并显示出来   displayEl.innerHTML = listHTML; }  // 修改 save 函数，使其在数据更新后调用 displayLinksAsList function save() {   if (inputEl.value) {     linksArray.push(inputEl.value);     localStorage.setItem("mylinks", JSON.stringify(linksArray));     inputEl.value = "";     displayLinksAsList(); // 保存后立即更新显示   } }  // 修改 delLeads 函数，使其在数据清空后调用 displayLinksAsList function delLeads() {   linksArray = [];   localStorage.clear();   displayLinksAsList(); // 删除后立即更新显示 }  // 页面加载时调用一次，以显示 localStorage 中已有的数据 // 确保在所有函数定义之后调用 document.addEventListener('DOMContentLoaded', () => {   const myLinks = JSON.parse(localStorage.getItem("mylinks"));   if (myLinks) {     linksArray = myLinks;     displayLinksAsList();    } });

  工作原理说明:

  1. convertToListLi(array) 函数:

     • 它初始化一个空字符串 listItemsHTML。
     • 通过 for 循环遍历传入的 array。
     • 在每次迭代中，它将当前数组元素用 <li> 和 </li> 标签包裹起来，并将其追加到 listItemsHTML 字符串中。
     • 循环结束后，listItemsHTML 将包含所有 <li> 元素组成的完整 HTML 片段，例如 “<li>Link1</li><li>Link2</li>”。
     • 最后，该函数返回这个构建好的 HTML 字符串。

  2. displayLinksAsList() 函数:

     • 它调用 convertToListLi(linksArray) 来获取用于渲染列表的 HTML 字符串。
     • 然后，它将这个 HTML 字符串赋值给 displayEl.innerHTML。innerHTML 属性允许您获取或设置一个元素内部的 HTML 内容。当您设置它时，浏览器会解析您提供的 HTML 字符串，并将其对应的 DOM 元素插入到目标元素（在这里是 displayEl，即 <ul>）中。

  完整示例代码

  结合 HTML 和修正后的 JavaScript，一个完整的、可运行的示例：

  

  序列猴子开放平台

  具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

  0

  查看详情

  index.html:

  <!DOCTYPE html> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>JavaScript 数组到 DOM 列表渲染</title>     <style>         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; }     </style> </head> <body>     <h1>动态列表渲染示例</h1>      <input id="input-el" title="lead" placeholder="输入链接地址" type="text">     <button id="input-btn" onclick="save()">保存链接</button>     <button id="del-btn" ondblclick="delLeads()">删除所有</button>      <h2>我的链接列表:</h2>     <div>         <ul id="display_link-el">             <!-- 链接将在这里动态显示 -->         </ul>     </div>      <script src="script.js"></script> </body> </html>

  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 += "<li>" + array[i] + "</li>";   }   return listItemsHTML;  }  // 函数：更新 DOM 中的链接列表显示 function displayLinksAsList() {   const listHTML = convertToListLi(linksArray);   displayEl.innerHTML = listHTML; }  // 函数：保存输入到数组并更新 localStorage function save() {   if (inputEl.value.trim()) { // 使用 trim() 确保输入不为空白字符     linksArray.push(inputEl.value.trim());     localStorage.setItem("mylinks", JSON.stringify(linksArray));     inputEl.value = "";      displayLinksAsList();    } else {     alert("请输入有效的链接！");   } }  // 函数：删除所有链接并清空 localStorage function delLeads() {   if (confirm("确定要删除所有链接吗？")) {     linksArray = [];     localStorage.clear();     displayLinksAsList();    } }  // 页面加载时执行：从 localStorage 加载数据并渲染列表 document.addEventListener('DOMContentLoaded', () => {   const storedLinks = JSON.parse(localStorage.getItem("mylinks"));   if (storedLinks) {     linksArray = storedLinks;     displayLinksAsList();    } });

  安全注意事项：跨站脚本 (XSS)

  重要提示: 当您使用 innerHTML 属性来插入包含用户提供的数据的 HTML 字符串时，必须格外小心。如果用户输入包含恶意脚本（例如 <script>alert(‘XSS’);</script>），并且您直接将其插入到 DOM 中，那么这些脚本将被执行，这被称为跨站脚本 (XSS) 攻击。

  防范措施:

  1. 输入验证与净化:

     • 验证: 检查用户输入是否符合预期的格式（例如，是否是一个有效的 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 += "<li>" + escapeHTML(array[i]) + "</li>"; // 对用户输入进行转义   }   return listItemsHTML;  }  // 在 displayLinksAsList 中调用 convertToListLiSafe function displayLinksAsList() {   const listHTML = convertToListLiSafe(linksArray); // 使用安全的函数   displayEl.innerHTML = listHTML; }

  2. 避免使用 innerHTML 处理用户输入: 对于更复杂或安全性要求更高的场景，可以考虑使用 document.createElement()、appendChild() 等 DOM API 来构建元素，而不是拼接 HTML 字符串。这种方法虽然可能代码量稍大，但由于浏览器会正确处理元素创建，可以有效避免许多 XSS 风险。

  总结

  通过本教程，您应该已经掌握了如何使用 JavaScript 将数组数据动态地渲染为 DOM 中的 HTML 列表。关键在于：

  • 使用循环遍历数组。
  • 为每个数组元素构建 <li> 标签。
  • 将所有 <li> 标签拼接成一个完整的 HTML 字符串。
  • 将该字符串赋值给目标 <ul> 元素的 innerHTML 属性。
  • 最重要的是，在使用 innerHTML 插入用户输入时，务必进行严格的安全净化，以防范 XSS 攻击。

  掌握这一技能将使您能够创建更加动态和交互性的 Web 应用程序。