HTML列表动态增删需先获取容器元素，再用JavaScript创建、插入或移除li节点；添加用createElement与appendChild，删除推荐事件委托配合remove()方法。
用 HTML 列表标签（<ul> 或 <ol>）配合 JavaScript 动态添加、删除列表项，核心是操作 DOM 元素。关键不在标签本身，而在如何用 JS 找到列表容器、创建新项、插入或移除节点。
获取列表容器并准备操作
先通过 document.getElementById 或 querySelector 选中目标列表（比如一个 <ul id="myList">）。这是后续所有增删操作的“父容器”。
- 确保页面加载完成后执行 JS，推荐放在
<script>标签底部，或用DOMContentLoaded事件 - 避免重复获取元素，可提前存为变量，例如：
const list = document.getElementById('myList');
动态添加列表项
添加就是创建新 <li> 元素，设置内容，再挂到列表里。常用方法有 appendChild()（加到末尾）或 insertBefore()（插到指定位置）。
- 用
document.createElement('li')创建新项 - 用
textContent或innerHTML设置内容（优先用textContent防 XSS） - 调用
list.appendChild(newLi)把它加进去 - 示例：
const newLi = document.createElement('li'); newLi.textContent = '新任务'; list.appendChild(newLi);
动态删除列表项
删除需要明确目标——通常靠点击事件委托或绑定在每个 <li> 上的按钮。关键是要调用父元素的 removeChild() 方法，或直接用元素自身的 remove()（更简洁）。
立即学习“Java免费学习笔记（深入）”；
- 给每个
<li>添加“删除”按钮（如<button class="del">×</button>） - 用事件委托监听列表：当点击按钮时，获取其父级
<li>，再调用li.remove() - 也可用
list.removeChild(li)，但需确保li确实是list的子元素 - 注意：不要用
innerHTML = ''清空整个列表，会丢失已绑定的事件监听器
带输入框的完整小例子
常见场景：输入文字 → 点击“添加” → 新 <li> 追加；每个 <li> 右侧有 × 按钮 → 点击即删除。
- HTML 中放一个
<input id="newItem">和<button id="addBtn">添加</button> - JS 绑定按钮点击事件：读取输入值 → 创建
<li>→ 插入列表 → 清空输入框 - 对列表使用事件委托：
list.addEventListener('click', e => { if (e.target.classList.contains('del')) e.target.closest('li').remove(); });
