如何将JavaScript数组数据动态渲染为DOM中的列表元素-html教程-PHP中文网

如何将JavaScript数组数据动态渲染为DOM中的列表元素

DDD

发布： 2025-11-02 12:55:01

原创

817人浏览过

如何将JavaScript数组数据动态渲染为DOM中的列表元素

本教程详细讲解如何将javascript数组中的数据高效地渲染为dom中的无序列表（`

html

安全防护

动态渲染JavaScript数组为DOM列表元素

在Web开发中，经常需要将后端获取或用户输入的动态数据以列表形式展示在页面上。JavaScript数组是存储这类数据的常见结构，而将其内容渲染为HTML的无序列表（<ul>）或有序列表（<ol>）是基础且重要的技能。本节将详细介绍如何实现这一功能，并提供安全实践建议。

核心原理：构建HTML字符串并更新DOM

将JavaScript数组转换为DOM列表元素的核心思路是：遍历数组中的每个元素，为每个元素生成一个对应的列表项（<li>）的HTML字符串，然后将所有这些列表项拼接成一个完整的HTML字符串，最后将这个完整的HTML字符串赋值给目标<ul>或<ol>元素的innerHTML属性。

1. 构建列表项HTML字符串

首先，我们需要一个函数来接收一个JavaScript数组，并返回一个包含所有列表项的HTML字符串。

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

/**
 * 将JavaScript数组转换为包含<li>元素的HTML字符串。
 * @param {Array<string>} arr - 包含要显示的数据的字符串数组。
 * @returns {string} 包含所有<li>元素的HTML字符串。
 */
function convertToListLi(arr) {
  let listItemsHtml = ""; // 初始化一个空字符串，用于累加所有<li>元素
  for (let i = 0; i < arr.length; i++) {
    // 拼接每个数组元素为一个<li>标签
    // 注意：此处未进行XSS过滤，生产环境应严格处理用户输入
    listItemsHtml += `<li>${arr[i]}</li>`;
  }
  return listItemsHtml; // 返回最终的HTML字符串
}

登录后复制

在上述代码中，我们声明了一个listItemsHtml变量来存储生成的HTML。在循环中，我们使用模板字符串（反引号 `）来方便地将数组元素arr[i]嵌入到<li>标签中，并将其追加到listItemsHtml变量。

序列猴子开放平台

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

查看详情

2. 将HTML字符串渲染到DOM

有了生成HTML字符串的函数后，下一步就是将其插入到DOM中。这通常在一个事件处理函数（例如点击按钮）中完成。

let linksArray = []; // 存储链接数据的数组
const inputEl = document.getElementById("input-el"); // 获取输入框元素
const displayEl = document.getElementById("display_link-el"); // 获取目标<ul>元素

/**
 * 保存用户输入并更新DOM列表。
 */
function save() {
  const inputValue = inputEl.value.trim(); // 获取输入值并去除首尾空格
  if (inputValue) { // 确保输入不为空
    linksArray.push(inputValue); // 将新输入添加到数组
    inputEl.value = ""; // 清空输入框

    // 将更新后的数组渲染到DOM
    displayEl.innerHTML = convertToListLi(linksArray);

    // 可选：将数据保存到localStorage，以便页面刷新后仍能保留
    localStorage.setItem("mylinks", JSON.stringify(linksArray));
  }
}

登录后复制

这里需要注意的是，我们使用displayEl.innerHTML = convertToListLi(linksArray);来更新DOM。innerHTML属性允许我们设置或获取元素的HTML内容。与textContent不同，innerHTML会解析并渲染HTML标签，使其成为实际的DOM元素。

完整示例代码

下面是一个包含HTML结构和JavaScript逻辑的完整示例，演示了如何通过用户输入动态地添加和显示列表项。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态渲染数组为DOM列表</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
        h1, h2 { color: #0056b3; }
        div { margin-bottom: 15px; }
        input[type="text"] {
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 250px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s ease;
        }
        button:hover { background-color: #0056b3; }
        button#del-btn { background-color: #dc3545; }
        button#del-btn:hover { background-color: #c82333; }
        ul {
            list-style-type: decimal; /* 使用数字列表 */
            padding-left: 25px;
            margin-top: 15px;
            background-color: #fff;
            border: 1px solid #eee;
            border-radius: 4px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        li {
            margin-bottom: 8px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>动态列表渲染示例</h1>
    <div>
        <input id="input-el" title="lead" placeholder="输入链接或文本" type="text">
        <button id="input-btn" onclick="save()">保存到列表</button>
        <button id="del-btn" ondblclick="delLeads()">删除所有</button>
    </div>
    <div>
        <h2>我的动态列表</h2>
        <ul id="display_link-el"></ul>
    </div>

    <script>
        let linksArray = []; // 存储链接数据的数组
        const inputEl = document.getElementById("input-el"); // 获取输入框元素
        const displayEl = document.getElementById("display_link-el"); // 获取目标<ul>元素

        // 页面加载时尝试从localStorage加载数据
        const storedLinks = JSON.parse(localStorage.getItem("mylinks"));
        if (storedLinks) {
            linksArray = storedLinks;
            displayEl.innerHTML = convertToListLi(linksArray); // 初始渲染
        }

        /**
         * 将JavaScript数组转换为包含<li>元素的HTML字符串。
         * @param {Array<string>} arr - 包含要显示的数据的字符串数组。
         * @returns {string} 包含所有<li>元素的HTML字符串。
         */
        function convertToListLi(arr) {
            let listItemsHtml = "";
            for (let i = 0; i < arr.length; i++) {
                // 注意：这里直接使用了数组元素，未进行XSS过滤。
                // 生产环境中，对于用户输入的内容，必须先进行转义或净化。
                listItemsHtml += `<li>${arr[i]}</li>`;
            }
            return listItemsHtml;
        }

        /**
         * 保存用户输入并更新DOM列表。
         */
        function save() {
            const inputValue = inputEl.value.trim();
            if (inputValue) {
                linksArray.push(inputValue);
                inputEl.value = ""; // 清空输入框

                // 渲染更新后的数组到DOM
                displayEl.innerHTML = convertToListLi(linksArray);

                // 保存到localStorage
                localStorage.setItem("mylinks", JSON.stringify(linksArray));
            }
        }

        /**
         * 删除所有链接的示例函数。
         * 生产环境中应包含更详细的确认弹窗和数据清理

登录后复制

以上就是如何将JavaScript数组数据动态渲染为DOM中的列表元素的详细内容，更多请关注php中文网其它相关文章！