当前位置：首页 > 前端开发 > 正文

html 如何循环li

admin
前端开发
2025-08-22
7

HTML中循环生成` 元素可通过JavaScript（如原生JS或jQuery动态创建）、Vue的v-for`指令实现，也可结合模板引擎批量渲染

HTML中实现<li>元素的循环渲染是一个常见的需求，尤其在处理动态数据时，以下是几种主流且实用的方法，涵盖纯前端技术（如JavaScript、jQuery）和后端模板引擎的支持方案：

通过JavaScript原生实现动态创建

这是最基础的方式,适用于任何现代浏览器环境，核心思路是利用document.createElement()方法批量生成节点，并追加到父容器中。

// 假设有一个数组存储列表项文本
const items = ['苹果', '香蕉', '橙子', '葡萄'];
const parentUl = document.getElementById('fruitList'); // 确保HTML中有<ul id="fruitList"></ul>
items.forEach(item => {
    const li = document.createElement('li'); // 创建新的li元素
    li.textContent = item;                  // 设置文本内容
    parentUl.appendChild(li);               // 添加到UL中
});

此方案的优势在于无需依赖第三方库,完全基于Web标准API实现，若需添加复杂结构（如嵌套标签或事件监听），可在循环体内扩展逻辑，例如为每个条目绑定点击事件：

li.addEventListener('click', () => console.log(`选中了${item}`));

使用jQuery简化DOM操作

对于已引入jQuery的项目,其链式调用语法能显著提升代码可读性，典型实现如下：

<ul id="jqDemo"></ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
        const data = ['北京', '上海', '广州', '深圳'];
        $.each(data, function(index, value){
            $('<li/>').text(value).appendTo('#jqDemo');
        });
    });
</script>

关键点在于$('<li/>')创建新元素后，通过appendTo()直接定位目标容器，这种方式避免了频繁的DOM查询操作，性能更优，jQuery还支持通过html()方法一次性注入所有内容：

$('#jqDemo').html(data.map(v => `<li>${v}</li>`).join(''));

服务器端模板渲染（以EJS为例）

当项目采用Node.js等后端框架时，推荐使用模板引擎预处理HTML，以下是一个Express+EJS的配置示例：

安装依赖：npm install ejs

创建视图文件views/list.ejs：

<% const cities = ['杭州','南京','武汉','成都']; %>
<ul>
  <% cities.forEach(city => { %>
    <li><%= city %></li>
  <% }); %>
</ul>

Node.js路由代码：
```
app.get('/cities', (req, res) => {
  res.render('list', { title: '城市列表' });
});
```
这种方法将数据与视图分离,适合SEO优化且便于维护，类似的模板语法也存在于Thymeleaf（Java）、Django模板语言（Python）等系统中。

Vue.js双向绑定方案

对于SPA应用,建议采用响应式框架管理状态，以Vue 3的组合式API为例：

<template>
  <div>
    <input v-model="newItem" placeholder="输入新条目">
    <button @click="addItem">添加</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const list = ref(['初始数据']);
const newItem = ref('');
function addItem() {
  if (newItem.value) list.value.push(newItem.value);
  newItem.value = '';
}
</script>

此处v-for指令自动跟踪数组变化并更新DOM，结合:key属性可确保高效重渲染，这种数据驱动的模式大幅降低了手动操作DOM的复杂度。

不同技术的对比分析

特性	JavaScript原生	jQuery	EJS模板	Vue.js
学习曲线	中等	低	中	高
适用场景	简单交互	传统网页增强	SSR应用	复杂单页应用
SEO友好度	差（客户端执行）	差	优	中等（SSR模式）
性能表现	依赖优化策略	较快但冗余代码多	最快（预渲染）	虚拟DOM优化好
生态支持	全平台通用	插件丰富	服务端集成佳	周边工具链完善