JavaScript数组动态渲染DOM列表项教程-html教程-PHP中文网

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

DDD

发布： 2025-11-02 10:37:01

原创

117人浏览过

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

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

`）。我们将通过详细的示例代码，学习如何遍历数组、构建html字符串，并安全高效地更新页面内容，特别强调了使用`innerhtml`时的安全注意事项。
在现代Web开发中，经常需要将动态数据（例如从API获取或用户输入）展示在页面上。JavaScript数组是存储这类数据的常用结构，而将数组内容以列表形式展示在DOM中，是实现这一需求的基本操作。本教程将详细介绍如何实现这一功能。

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

要将JavaScript数组中的元素转换为DOM中的列表项，主要涉及以下几个步骤：
1. 获取数据源： 准备一个包含待显示数据的JavaScript数组。
2. 遍历数组： 迭代数组中的每个元素。
3. 构建HTML字符串： 在遍历过程中，为每个数组元素创建对应的HTML <li> 标签字符串。
4. 更新DOM： 将所有生成的 <li> 标签字符串组合成一个完整的HTML字符串，然后将其插入到目标 <ul> 元素的 innerHTML 属性中。
示例代码

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

HTML 结构

首先，定义页面所需的HTML元素，包括一个输入框、两个按钮和一个用于显示列表的 <ul> 元素。

立即学习“Java免费学习笔记（深入）”；

序列猴子开放平台
具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

0

查看详情
```
<!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;
}
```
登录后复制
代码解析
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。
  - 在每次循环中，将当前数组元素包裹在 <li> 标签中，并将其追加到 listItems 字符串中。
  - 循环结束后，返回包含所有 <li> 标签的完整HTML字符串。
5. renderLinks() 函数：
  - 此函数负责将 linksArray 的内容实际显示在页面上。
  - 它调用 convertToListHtml(linksArray) 来获取生成的HTML列表字符串。
  - 最关键的一步是 displayEl.innerHTML = htmlList;。这将 displayEl (即 <ul> 元素) 的内部HTML内容替换为 htmlList 字符串。浏览器会自动解析这个字符串并创建相应的DOM元素。
注意事项
1. XSS 安全警告： 当使用 innerHTML 将用户输入的数据直接插入到DOM中时，存在跨站脚本攻击（XSS）的风险。恶意用户可能会输入包含可执行脚本的字符串，例如 <script>alert('XSS');</script>。如果这些脚本未经处理就插入到页面中，它们就会被执行。 最佳实践： 在将任何用户输入的数据赋值给 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操作方法。掌握这些基础知识是进行更复杂前端开发的关键一步。