从静态HTML到JavaScript动态渲染列表，通过将数据与视图分离，提升页面灵活性和可维护性。1. 传统HTML写死结构适用于内容固定场景，但维护困难；2. 使用JS动态渲染，将数据存于数组，通过DOM操作循环生成列表项，实现数据驱动视图；3. 利用模板字符串结合map和join生成HTML字符串，再通过innerHTML插入，代码更简洁且性能较好，但需防范XSS风险；4. 现代框架如Vue使用v-for、React使用map在JSX中渲染列表，支持响应式更新和组件化开发，适合复杂应用。关键在于抽取数据并用代码生成DOM，同时注意清空旧内容、转义特殊字符等细节，以更好应对动态内容需求。
列表渲染从HTML直接写死结构转向用JavaScript动态生成，能提升页面灵活性和可维护性。核心思路是将数据与视图分离，通过JS操作DOM或使用现代框架机制来动态创建列表项。
1. 原生HTML列表结构
传统方式是在HTML中手动写入每个列表项：
- 苹果
- 香蕉
- 橙子
这种方式适合内容固定不变的场景，但数据更新时需手动修改HTML，不利于维护。
2. 使用JavaScript动态渲染列表
将数据存储在JS变量中，通过循环动态插入到页面，实现数据驱动视图。
立即学习“前端免费学习笔记（深入）”；
步骤如下：- 准备数据：用数组保存列表内容
- 获取DOM容器：选择页面中的ul或ol元素
- 遍历数据：使用for循环或forEach生成li元素
- 插入页面：通过innerHTML或appendChild添加到DOM
示例代码：
// 数据 const fruits = ['苹果', '香蕉', '橙子']; // 获取容器 const listContainer = document.getElementById('fruitList'); // 遍历生成 fruits.forEach(fruit => { const li = document.createElement('li'); li.textContent = fruit; listContainer.appendChild(li); });
3. 使用模板字符串简化渲染
用map配合join生成完整HTML字符串，再通过innerHTML一次性插入，代码更简洁。
const fruits = ['苹果', '香蕉', '橙子']; const listContainer = document.getElementById('fruitList'); listContainer.innerHTML = fruits .map(fruit => `注意：innerHTML方式性能较好，但需防范XSS风险，对用户输入应做转义处理。
4. 结合现代框架（如Vue/React）实现响应式渲染
在Vue中使用v-for，React中使用map渲染列表，数据变化时自动更新视图。
- Vue: v-for="item in list" 实现列表循环
- React: 在JSX中使用 {list.map(item =>
- {item} )}
这类方式进一步解耦数据与UI，支持组件化开发，适合复杂应用。
基本上就这些。从静态HTML到JS动态渲染，关键是把数据抽出来，用代码生成DOM。不复杂但容易忽略细节，比如清空旧内容、处理特殊字符等。掌握后能更好应对动态内容需求。
