JavaScript DOM操作：向列表项动态添加用户输入和删除按钮
最新回答
牵一缕阳光
2020-08-10 17:38:19
要实现向列表项动态添加用户输入和删除按钮的功能，需通过JavaScript的DOM操作完成，核心步骤包括创建元素、设置内容、追加子节点并处理事件。
创建基础HTML结构需包含输入框、提交按钮和有序列表容器（<ol id="todoList">），示例如下：
<form id="todoForm"> <input type="text" id="todoInput" placeholder="输入新的待办事项..."> <button type="submit">添加</button></form><ol id="todoList"></ol>监听表单提交事件通过addEventListener监听表单的submit事件，阻止默认提交行为（页面刷新），并获取用户输入：
todoForm.addEventListener('submit', (e) => { e.preventDefault(); const itemText = todoInput.value.trim(); if (itemText === '') { alert('待办事项不能为空！'); return; }});动态创建列表项元素
创建<li>元素：作为列表项的容器。
创建<span>元素：包裹用户输入的文本，使用textContent设置内容以避免XSS攻击。
创建删除按钮：设置按钮文本并添加点击事件监听器，点击时移除对应的<li>元素。
const newItem = document.createElement('li');const textSpan = document.createElement('span');textSpan.textContent = itemText;const deleteButton = document.createElement('button');deleteButton.textContent = '删除';deleteButton.addEventListener('click', () => { newItem.remove();});组装元素并追加到DOM将<span>和删除按钮依次追加到<li>中，再将完整的<li>追加到<ol>容器：
newItem.appendChild(textSpan);newItem.appendChild(deleteButton);todoListContainer.appendChild(newItem);清空输入框并聚焦操作完成后清空输入框，方便用户继续输入：
todoInput.value = '';todoInput.focus();
关键注意事项
- 元素追加顺序：必须确保所有子元素（如文本和按钮）通过appendChild逐一追加到父元素（<li>）中，否则会导致显示错乱。
- 安全性：使用textContent而非innerHTML设置文本内容，防止XSS攻击。
- 性能优化：对于大量动态元素，可采用事件委托（在父元素上监听事件）替代为每个子元素单独添加监听器。
完整代码示例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>动态待办事项列表</title> <style> li { display: flex; align-items: center; } li span { flex-grow: 1; } li button { margin-left: 10px; } </style></head><body> <form id="todoForm"> <input type="text" id="todoInput"> <button type="submit">添加</button> </form> <ol id="todoList"></ol> <script> document.addEventListener('DOMContentLoaded', () => { const todoInput = document.getElementById('todoInput'); const todoForm = document.getElementById('todoForm'); const todoListContainer = document.getElementById('todoList'); todoForm.addEventListener('submit', (e) => { e.preventDefault(); const itemText = todoInput.value.trim(); if (!itemText) { alert('输入不能为空！'); return; } const newItem = document.createElement('li'); const textSpan = document.createElement('span'); textSpan.textContent = itemText; const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.addEventListener('click', () => newItem.remove()); newItem.appendChild(textSpan); newItem.appendChild(deleteButton); todoListContainer.appendChild(newItem); todoInput.value = ''; todoInput.focus(); }); }); </script></body></html>总结通过document.createElement创建元素、textContent设置安全文本、appendChild构建层级结构，并结合事件监听实现交互功能，可高效完成动态列表的生成与管理。遵循上述步骤能避免常见错误（如元素遗漏），确保代码的健壮性和可维护性。
热门标签
