本教程详细讲解如何将javascript数组中的数据高效地渲染为dom中的无序列表（`
`）项。文章通过构建html字符串并利用`innerhtml`属性实现动态更新，同时强调了使用`innerhtml`时可能存在的跨站脚本（xss）风险，并提供了相应的安全防护建议，旨在帮助开发者安全且有效地在网页上展示动态数据。
动态渲染JavaScript数组为DOM列表元素
在Web开发中，经常需要将后端获取或用户输入的动态数据以列表形式展示在页面上。JavaScript数组是存储这类数据的常见结构，而将其内容渲染为HTML的无序列表（
）或有序列表（）是基础且重要的技能。本节将详细介绍如何实现这一功能，并提供安全实践建议。
核心原理：构建HTML字符串并更新DOM
将JavaScript数组转换为DOM列表元素的核心思路是：遍历数组中的每个元素，为每个元素生成一个对应的列表项（
）的HTML字符串，然后将所有这些列表项拼接成一个完整的HTML字符串，最后将这个完整的HTML字符串赋值给目标或元素的innerHTML属性。
1. 构建列表项HTML字符串
首先，我们需要一个函数来接收一个JavaScript数组，并返回一个包含所有列表项的HTML字符串。
立即学习“Java免费学习笔记（深入）”；
/** * 将JavaScript数组转换为包含
在上述代码中，我们声明了一个listItemsHtml变量来存储生成的HTML。在循环中，我们使用模板字符串（反引号 `）来方便地将数组元素arr[i]嵌入到
标签中，并将其追加到listItemsHtml变量。
2. 将HTML字符串渲染到DOM
有了生成HTML字符串的函数后，下一步就是将其插入到DOM中。这通常在一个事件处理函数（例如点击按钮）中完成。
let linksArray = []; // 存储链接数据的数组const inputEl = document.getElementById("input-el"); // 获取输入框元素const displayEl = document.getElementById("display_link-el"); // 获取目标- 元素/** * 保存用户输入并更新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逻辑的完整示例，演示了如何通过用户输入动态地添加和显示列表项。
动态渲染数组为DOM列表 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; }动态列表渲染示例
let linksArray = []; // 存储链接数据的数组 const inputEl = document.getElementById("input-el"); // 获取输入框元素 const displayEl = document.getElementById("display_link-el"); // 获取目标我的动态列表
- 元素 // 页面加载时尝试从localStorage加载数据 const storedLinks = JSON.parse(localStorage.getItem("mylinks")); if (storedLinks) { linksArray = storedLinks; displayEl.innerHTML = convertToListLi(linksArray); // 初始渲染 } /** * 将JavaScript数组转换为包含
- 元素的HTML字符串。 * @param {Array} arr - 包含要显示的数据的字符串数组。 * @returns {string} 包含所有
- 元素的HTML字符串。 */ function convertToListLi(arr) { let listItemsHtml = ""; for (let i = 0; i < arr.length; i++) { // 注意：这里直接使用了数组元素，未进行XSS过滤。 // 生产环境中，对于用户输入的内容，必须先进行转义或净化。 listItemsHtml += `
- ${arr[i]} `; } 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中的列表元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591323.html
微信扫一扫 
支付宝扫一扫 
