在前端页面开发中，动态生成列表是常见的需求，比如根据后台返回的数据渲染商品列表、任务列表等。很多时候我们不仅需要给列表项添加文本，还需要附带删除、编辑这类操作按钮，下面我们就一步步实现这个功能。
实现思路梳理
动态创建带文本和操作按钮的列表项，核心逻辑可以分为以下几步：
- 创建列表项元素<li>
- 给列表项设置对应的文本内容
- 创建操作按钮元素，比如删除按钮
- 给操作按钮绑定对应的点击事件
- 将按钮添加到列表项中，再把列表项插入到目标列表容器里
基础实现代码示例
我们先实现一个简单的场景：点击页面上的添加按钮，就动态创建一个包含文本和删除按钮的列表项，插入到已有的无序列表中。
首先准备基础的HTML结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态创建列表项</title>
</head>
<body>
<button id="addBtn">添加列表项</button>
<ul id="listContainer"></ul>
</body>
</html>接下来是核心的JavaScript代码：
// 获取添加按钮和列表容器
const addBtn = document.getElementById('addBtn');
const listContainer = document.getElementById('listContainer');
// 定义一个计数器，用来生成不同的列表项文本
let itemCount = 1;
// 给添加按钮绑定点击事件
addBtn.addEventListener('click', function() {
// 1. 创建列表项元素
const listItem = document.createElement('li');
// 设置列表项的文本内容
listItem.textContent = `列表项 ${itemCount}`;
// 2. 创建删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
// 给删除按钮添加一点样式，方便区分
deleteBtn.style.marginLeft = '10px';
// 3. 给删除按钮绑定点击事件，点击后删除当前列表项
deleteBtn.addEventListener('click', function() {
listContainer.removeChild(listItem);
});
// 4. 将删除按钮添加到列表项中
listItem.appendChild(deleteBtn);
// 5. 将列表项添加到列表容器中
listContainer.appendChild(listItem);
// 计数器自增，保证下次添加的列表项文本不同
itemCount++;
});代码逻辑解析
上面的代码里我们用到了几个核心的DOM操作方法：
document.createElement(tagName)：用来创建指定标签名的元素节点，这里我们分别创建了<li>和<button>元素textContent：用来设置或者获取元素的文本内容，这里我们给列表项和按钮都设置了对应的文本appendChild(child)：用来把一个子节点添加到父节点的子节点列表的末尾，这里我们把按钮加到列表项里，再把列表项加到列表容器里removeChild(child)：用来从父节点中移除指定的子节点，删除按钮的点击事件里就是调用这个方法移除当前的列表项
进阶场景：根据数据批量创建列表项
实际开发中我们更多是根据接口返回的数据批量生成列表，比如下面有一个任务数据数组，我们需要把每个任务渲染成带完成按钮的列表项：
// 模拟接口返回的任务数据
const taskList = [
{ id: 1, content: '学习JavaScript DOM操作', done: false },
{ id: 2, content: '练习动态创建元素', done: false },
{ id: 3, content: '完成列表项功能开发', done: false }
];
// 获取列表容器
const taskContainer = document.getElementById('listContainer');
// 遍历任务数据，批量创建列表项
taskList.forEach(task => {
// 创建列表项
const taskItem = document.createElement('li');
// 设置列表项文本为任务内容
taskItem.textContent = task.content;
// 创建完成按钮
const doneBtn = document.createElement('button');
doneBtn.textContent = '标记完成';
doneBtn.style.marginLeft = '10px';
// 绑定完成按钮点击事件，点击后修改按钮文本并禁用
doneBtn.addEventListener('click', function() {
doneBtn.textContent = '已完成';
doneBtn.disabled = true;
taskItem.style.textDecoration = 'line-through';
taskItem.style.color = '#999';
});
// 组装元素
taskItem.appendChild(doneBtn);
taskContainer.appendChild(taskItem);
});注意事项
在动态创建元素的时候有几个点需要注意：
- 事件绑定要在元素添加到页面之前或者之后都可以，但是如果是批量创建大量元素，建议使用事件委托，减少事件绑定的性能消耗
- 如果列表项的内容包含用户输入的内容，要注意防范XSS攻击，不要直接使用
innerHTML插入内容，优先使用textContent - 动态创建的元素如果后续需要操作，最好给元素添加特定的类名或者自定义属性，方便后续通过选择器获取
动态创建列表项是DOM操作的基础应用，掌握这个方法后，还可以扩展到动态创建表格行、动态生成表单元素等更多场景，核心逻辑都是创建元素、设置属性、绑定事件、插入页面的流程。
JavaScript动态创建元素DOM操作列表项事件绑定修改时间：2026-06-02 04:16:36