用原生HTML+JavaScript实现树形节点增删需先设计带id、parentId等属性的节点数据结构，增删操作先更新数据再渲染DOM；用事件委托绑定click监听，新增后展开父节点并滚动聚焦新节点。
怎么用原生 HTML + JavaScript 实现树形节点的新增和删除
纯 HTML 本身不支持动态树形结构操作，必须配合 JavaScript 操作 DOM 节点。关键不是“写 HTML”，而是用 document.createElement、appendChild、removeChild 或 remove() 动态增删节点，并维护好父子关系数据结构。
常见错误是只改 DOM 不同步数据，导致后续点击、展开、保存时逻辑错乱。真实项目里，建议先设计一个轻量级树节点对象（比如带 id、parentId、children、label 的 plain object），所有增删都先操作这个数据，再批量渲染 DOM。
- 新增节点前，必须明确指定父节点
id（比如点击了某个折叠项后才弹出“新增子节点”按钮） - 删除节点时，要递归清除所有后代节点（否则 DOM 删除了，但数据里还留着“幽灵子节点”）
- 避免直接用
innerHTML += '...'拼接树结构——会重置所有已绑定的事件监听器和输入框状态
为什么 click 事件监听不到动态添加的子节点
因为事件监听器没绑定到新节点上。你不能对每个新 <li> 都单独调用 addEventListener，容易内存泄漏且难维护。
正确做法是事件委托：把监听器绑定在树容器（比如 <ul id="tree-root">）上，用 event.target.matches('.node-delete-btn') 判断是否点中了删除按钮。
立即学习“前端免费学习笔记（深入）”；
示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
document.getElementById('tree-root').addEventListener('click', function (e) {
if (e.target.matches('.btn-add-child')) {
const parentId = e.target.dataset.parentId;
addNodeToData(parentId); // 先更新数据
renderTree(); // 再整棵树重绘（或局部 patch）
}
if (e.target.matches('.btn-delete-node')) {
const nodeId = e.target.dataset.nodeId;
deleteNodeFromData(nodeId); // 同步删数据+后代
renderTree();
}
});
用 remove() 还是 removeChild() 删除 DOM 节点
优先用 node.remove() ——它更简洁、不用先获取父节点，且现代浏览器（Chrome 28+, Firefox 23+, Edge 12+）全部支持。只有需要兼容 IE 时才退回到 parentNode.removeChild(node)。
但注意：remove() 只删 DOM，不会自动清理关联的数据对象或定时器。如果你给某个节点绑了 setInterval 或自定义属性（如 node.__customState），得手动清理。
- 删之前检查节点是否存在：
if (node && node.parentNode) node.remove(); - 如果节点还在文档片段（
DocumentFragment）里未挂载，remove()无效，此时可直接丢弃引用 - Vue/React 等框架里不要手动调用
remove()，应通过响应式数据驱动更新
新增节点后如何保持展开状态和焦点
用户新增子节点后，常期望父节点自动展开、新节点获得视觉焦点（比如高亮或滚动到视图）。这需要两步：设置父节点的展开状态标记（如加 class expanded），再调用 scrollIntoView() 或 focus()。
示例（假设新节点 DOM 是 newLi）：
// 展开父节点（找到最近的 .tree-node）
const parentNode = newLi.closest('.tree-node');
if (parentNode) parentNode.classList.add('expanded');
// 滚动并聚焦
newLi.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
newLi.setAttribute('tabindex', '-1'); // 确保可聚焦
newLi.focus();
容易被忽略的是：如果树用了虚拟滚动或懒加载，scrollIntoView() 可能失效；此时得先触发加载逻辑，等 DOM 存在后再执行滚动。
