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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-02

浏览次数：次

返回列表

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

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

动态渲染J*aScript数组为DOM列表元素

在Web开发中，经常需要将后端获取或用户输入的动态数据以列表形式展示在页面上。J*aScript数组是存储这类数据的常见结构，而将其内容渲染为HTML的无序列表（

）或有序列表（

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

将J*aScript数组转换为DOM列表元素的核心思路是：遍历数组中的每个元素，为每个元素生成一个对应的列表项（

）的HTML字符串，然后将所有这些列表项拼接成一个完整的HTML字符串，最后将这个完整的HTML字符串赋值给目标

或

1. 构建列表项HTML字符串

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

/**
 * 将J*aScript数组转换为包含<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]嵌入到

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319

查看详情

标签中，并将其追加到listItemsHtml变量。

2. 将HTML字符串渲染到DOM

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

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

/**
 * 保存用户输入并更新DOM列表。
 */
function s*e() {
  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结构和J*aScript逻辑的完整示例，演示了如何通过用户输入动态地添加和显示列表项。

<!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="s*e()">保存到列表</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); // 初始渲染
        }

        /**
         * 将J*aScript数组转换为包含<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 s*e() {
            const inputValue = inputEl.value.trim();
            if (inputValue) {
                linksArray.push(inputValue);
                inputEl.value = ""; // 清空输入框

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

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

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

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

# 连接到 # 芝罘网站推广策略 # 临沂二手设备网站推广 # 宝安网站建设及推广外包 # 用seo创业经验 # 捷途开店推广营销计划书 # 抖音矩阵SEO教程 # 沂水县公司网站设计推广 # 兰州seo搜索优化 # seo有什么问题 # 美国网站推广费用 # 组中 # 的是 # 清空 # javascript # 转换为 # 输入框 # 如何将 # 置顶 # red # 字符串数组 # 安全防护 # 后端 # json # js # html # java

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：jQuery与纯CSS实现多元素独立悬停提示效果教程

下一篇：jQuery closest()与属性选择器：精准定位并操作父元素

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

动态渲染J*aScript数组为DOM列表元素

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

完整示例代码