JavaScript DOM操作如何动态创建包含文本和交互按钮的列表项

在网页交互开发中，动态生成列表项是十分常见的需求，比如新增待办事项、加载动态数据渲染列表等场景都需要用到JavaScript DOM操作。下面我们就一步步学习如何实现动态创建包含文本和交互按钮的列表项。

核心DOM操作方法说明

要实现动态创建列表项，首先需要了解几个核心的DOM操作方法：

• document.createElement(tagName)：创建指定标签名的HTML元素
• element.appendChild(child)：将子元素添加到父元素的子节点列表末尾
• element.textContent：设置或获取元素的文本内容
• element.addEventListener(type, listener)：给元素绑定指定类型的事件监听函数

完整实现步骤

1. 准备基础HTML结构

首先我们需要一个基础的页面结构，包含一个输入框、添加按钮和用于存放列表项的无序列表：

<div class="container">
  <input type="text" id="itemInput" placeholder="请输入列表项内容">
  <button id="addBtn">添加列表项</button>
  <ul id="listContainer"></ul>
</div>

2. 编写动态创建列表项的JavaScript代码

接下来编写核心逻辑，实现点击添加按钮后，动态创建包含文本和删除按钮的列表项：

// 获取相关DOM元素
const addBtn = document.getElementById('addBtn');
const itemInput = document.getElementById('itemInput');
const listContainer = document.getElementById('listContainer');

// 给添加按钮绑定点击事件
addBtn.addEventListener('click', function() {
  // 获取输入框内容，去除首尾空格
  const inputValue = itemInput.value.trim();
  // 如果输入内容为空，直接返回不执行后续操作
  if (!inputValue) {
    alert('请输入列表项内容');
    return;
  }

  // 1. 创建列表项元素 li
  const listItem = document.createElement('li');
  // 设置列表项的文本内容
  listItem.textContent = inputValue;

  // 2. 创建删除按钮
  const deleteBtn = document.createElement('button');
  // 设置按钮文本
  deleteBtn.textContent = '删除';
  // 给删除按钮绑定点击事件，点击后删除当前列表项
  deleteBtn.addEventListener('click', function() {
    listItem.remove();
  });

  // 3. 将删除按钮添加到列表项中
  listItem.appendChild(deleteBtn);

  // 4. 将列表项添加到无序列表中
  listContainer.appendChild(listItem);

  // 清空输入框内容
  itemInput.value = '';
});

3. 补充基础样式（可选）

为了让列表项看起来更清晰，可以添加一些简单的CSS样式：

#listContainer {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
#listContainer li {
  padding: 10px;
  border: 1px solid #eee;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#listContainer li button {
  padding: 4px 12px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

注意事项

如果后续需要给动态生成的列表项绑定其他事件，比如点击列表项标记完成，不需要单独给每个新生成的列表项绑定事件，可以使用事件委托的方式，将事件绑定到父容器上：

// 事件委托：给列表容器绑定点击事件，处理列表项的完成标记
listContainer.addEventListener('click', function(e) {
  // 判断点击的目标是否是列表项本身（不是删除按钮）
  if (e.target.tagName === 'LI') {
    // 切换完成状态的样式类
    e.target.classList.toggle('completed');
  }
});

这样就可以避免重复绑定事件，提升代码性能，也方便后续维护。

JavaScriptDOM操作动态创建元素事件绑定列表项修改时间：2026-05-29 17:32:17