欢迎来到雄杰鑫电商资讯网
技术教程

JavaScript数组动态渲染DOM列表项教程

DDD 次阅读

本教程旨在指导开发者如何将javascript数组中的数据动态地渲染到dom中的无序列表（`

    `）作为列表项（`
  • `）。我们将通过详细的示例代码，学习如何遍历数组、构建html字符串，并安全高效地更新页面内容，特别强调了使用`innerhtml`时的安全注意事项。

    在现代Web开发中，经常需要将动态数据（例如从API获取或用户输入）展示在页面上。JavaScript数组是存储这类数据的常用结构，而将数组内容以列表形式展示在DOM中，是实现这一需求的基本操作。本教程将详细介绍如何实现这一功能。

    核心概念：将数组数据转换为DOM列表

    要将JavaScript数组中的元素转换为DOM中的列表项，主要涉及以下几个步骤：

    1. 获取数据源： 准备一个包含待显示数据的JavaScript数组。
    2. 遍历数组： 迭代数组中的每个元素。
    3. 构建HTML字符串： 在遍历过程中，为每个数组元素创建对应的HTML
    4. 标签字符串。
    5. 更新DOM： 将所有生成的
    6. 标签字符串组合成一个完整的HTML字符串，然后将其插入到目标
        元素的 innerHTML 属性中。

    示例代码

    我们将通过一个实际的例子来演示如何实现这一过程。假设我们有一个输入框用于添加链接，并希望将这些链接收集到一个数组中，然后实时显示在一个无序列表中。

    HTML 结构

    首先，定义页面所需的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 = ""; // 用于累积所有 
    •  标签的字符串
    for (let i = 0; i < arr.length; i++) {
        // 拼接每个 
    •  标签，包含数组元素
        listItems += `
    • ${arr[i]}
      • `;
    }
    return listItems; // 返回完整的 HTML 列表字符串
}

// 渲染链接到 DOM
function renderLinks() {
    // 调用 convertToListHtml 函数生成 HTML 字符串
    const htmlList = convertToListHtml(linksArray);
    // 将生成的 HTML 字符串赋值给 ul 元素的 innerHTML
    displayEl.innerHTML = htmlList;
}

      代码解析

    1. DOM 元素获取：document.getElementById() 用于获取HTML中具有特定ID的元素，以便在JavaScript中对其进行操作。
    2. linksArray： 这是一个全局数组，用于存储用户输入的链接。
    3. saveLink() 函数：
      • 当用户点击“保存链接”按钮时，此函数会被调用。
      • 它将 inputEl.value（输入框中的文本）添加到 linksArray 中。
      • inputEl.value = "" 清空输入框，提供更好的用户体验。
      • localStorage.setItem("mylinks", JSON.stringify(linksArray)) 将更新后的 linksArray 转换为JSON字符串并存储在浏览器的本地存储中，以便在页面刷新后数据仍能保留。
      • 最后调用 renderLinks() 来更新DOM显示。
    4. convertToListHtml(arr) 函数：
      • 这是核心的列表转换函数。
      • 它初始化一个空字符串 listItems。
      • 使用 for 循环遍历传入的数组 arr。
      • 在每次循环中，将当前数组元素包裹在
      • 标签中，并将其追加到 listItems 字符串中。
      • 循环结束后，返回包含所有
      • 标签的完整HTML字符串。
    5. renderLinks() 函数：
      • 此函数负责将 linksArray 的内容实际显示在页面上。
      • 它调用 convertToListHtml(linksArray) 来获取生成的HTML列表字符串。
      • 最关键的一步是 displayEl.innerHTML = htmlList;。这将 displayEl (即
          元素) 的内部HTML内容替换为 htmlList 字符串。浏览器会自动解析这个字符串并创建相应的DOM元素。

    注意事项

    1. XSS 安全警告： 当使用 innerHTML 将用户输入的数据直接插入到DOM中时，存在跨站脚本攻击（XSS）的风险。恶意用户可能会输入包含可执行脚本的字符串，例如 。如果这些脚本未经处理就插入到页面中，它们就会被执行。 最佳实践： 在将任何用户输入的数据赋值给 innerHTML 之前，务必对其进行严格的过滤和编码，以移除或转义潜在的恶意HTML或JavaScript代码。对于本教程的简单示例，我们直接使用了 innerHTML，但在生产环境中，强烈建议使用DOM操作方法（如 document.createElement() 和 appendChild()）或成熟的JavaScript库/框架（它们通常内置了XSS防护机制）来处理用户生成的内容。
    2. 性能考量： 对于包含大量元素的数组，频繁地修改 innerHTML 可能会导致一定的性能开销，因为浏览器需要重新解析整个HTML字符串并重建DOM。在处理非常大的数据集时，考虑使用 document.createElement() 动态创建元素并通过 appendChild() 插入，或者使用文档片段（DocumentFragment）来减少DOM操作次数。
    3. 代码可读性： 使用模板字符串（``）来拼接HTML字符串，可以使代码更清晰易读，尤其是在包含变量时。

    总结

    本教程详细介绍了如何将JavaScript数组中的数据动态地渲染为DOM中的列表项。通过理解数组遍历、HTML字符串构建以及 innerHTML 的使用，您可以有效地在网页上展示动态数据。同时，我们强调了在使用 innerHTML 时必须注意XSS安全问题，并建议在生产环境中采取更安全的DOM操作方法。掌握这些基础知识是进行更复杂前端开发的关键一步。

前端开发 前端 浏览器 html app javascript java 编码 js json 代码可读性 点击事件

相关文章

按ESC键退出。