JS中如何访问appendChild动态创建的DOM元素？

问题原因 #

你的代码存在两个核心问题导致事件绑定失效：

• 事件绑定逻辑在页面初始加载阶段就执行了，此时后续通过appendChild动态插入的按钮还不存在于DOM树中，querySelector/getElementById无法选中尚未渲染的元素，自然无法绑定事件
• 你给每个动态生成的按钮、图标容器都设置了重复的id属性，HTML规范中id为页面全局唯一值，重复id会导致选择器匹配逻辑混乱

最优解决方法：事件委托 #

利用DOM事件冒泡机制，把事件绑定到页面加载时就已经存在的父容器（即你的待办列表容器#todolist）上，所有子元素的点击事件都会冒泡到父容器触发，只需要在事件回调中判断点击源的类型，执行对应逻辑即可，无需给每个新生成的按钮单独绑定事件。

修正后代码 #

首先修正动态生成元素的HTML结构，移除所有重复id，改用class和data-*属性标识按钮功能：

const form = document.querySelector('form');
const toDoList = document.querySelector('#todolist');
const input = document.querySelector('#formtext');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const newListItem = document.createElement('li');
  // 移除重复id，用class和data-action标识按钮类型
  newListItem.innerHTML = '<span class="todo-content">' + input.value.trim() + '</span>' +
    '<span class="icons">' +
    '<button class="buttonlist" data-action="check"><img src="checked.png" alt="勾选"></button>' +
    '<button class="buttonlist" data-action="remove"><img src="remove.png" alt="移除"></button>' +
    '<button class="buttonlist" data-action="edit"><img src="edit.png" alt="编辑"></button>' +
    '</span>';

  toDoList.appendChild(newListItem);
  form.reset();
})

// 给已存在的父容器绑定点击事件，统一处理所有按钮的点击逻辑
toDoList.addEventListener('click', (e) => {
  // 兼容点击按钮内部img的场景，向上查找最近的操作按钮
  const clickedBtn = e.target.closest('.buttonlist');
  if (!clickedBtn) return; // 点击位置不是操作按钮，直接终止逻辑

  // 找到当前按钮所属的列表项
  const currentItem = clickedBtn.closest('li');
  // 获取按钮对应的操作类型
  const actionType = clickedBtn.dataset.action;

  // 按操作类型执行对应逻辑
  switch (actionType) {
    case 'remove':
      currentItem.remove();
      alert('已移除列表项');
      break;
    case 'check':
      // 勾选逻辑示例：给文本加删除线
      currentItem.querySelector('.todo-content').classList.toggle('completed');
      break;
    case 'edit':
      // 编辑逻辑示例：弹窗修改文本
      const contentEl = currentItem.querySelector('.todo-content');
      const newContent = prompt('编辑待办内容', contentEl.textContent);
      if (newContent?.trim()) contentEl.textContent = newContent.trim();
      break;
  }
})

对应的可选样式（实现勾选后的划线效果）：

.completed {
  text-decoration: line-through;
  color: #94a3b8;
}

你的原有HTML结构无需修改即可正常运行。

方案优势 #

• 无需在每次新增列表项时重复执行事件绑定逻辑，性能更高
• 无论后续新增多少动态列表项，都可以自动响应事件，不会出现元素选不中的问题
• 从根源规避了重复id导致的选择器异常问题

内容的提问来源于stack exchange，提问作者Sarah Van Haute