JavaScript通过DOM操作实现页面实时更新，核心是创建节点（createElement、textContent/innerHTML）、插入节点（appendChild、insertBefore、append）和删除节点（removeChild、remove），可高效渲染动态内容。
JavaScript 通过操作 DOM 节点，让页面能随数据或用户行为实时变化。核心在于三步：创建新节点、插入到合适位置、按需删除旧内容。不依赖框架也能高效渲染列表、消息提示、表单反馈等动态场景。
创建节点：从空对象到可挂载元素
用 document.createElement() 生成 HTML 元素节点，再用 document.createTextNode() 或 textContent 设置纯文本；若需含标签的内容，可直接赋值给 innerHTML（注意 XSS 风险）。
-
const li = document.createElement('li');创建一个未挂载的<li>元素 -
li.textContent = '买牛奶';安全写入文本，不解析 HTML -
li.innerHTML = '买 <strong>牛奶</strong>';支持富内容，但需确保来源可信 - 如需批量插入多个子节点，可用 document.createDocumentFragment() 提升性能，避免频繁重排
插入节点：控制位置与顺序
插入不是简单“加进去”，而是明确指定父容器和相对位置。常用方法有：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
-
parent.appendChild(node)：追加到父元素末尾，最常用 -
parent.insertBefore(newNode, referenceNode)：插在某个已有节点之前，适合排序或前置提示 -
parent.append(...nodes)（ES2015+）：支持一次插入多个节点或字符串，更简洁 - 注意：
appendChild和append对已存在页面中的节点会执行“移动”而非“复制”，这点常被忽略
删除节点：安全移除，避免残留
删除必须通过父节点调用方法，不能直接对目标节点调用 .remove()（除非用现代 API）。
立即学习“Java免费学习笔记（深入）”；
-
parent.removeChild(child)：传统方式，需先获取父节点，再传入子节点引用 -
child.remove()：现代写法，一行搞定，兼容性良好（IE 不支持，其他主流浏览器均可用） - 删除前建议确认节点是否真实存在，避免报错：
if (child && child.parentNode) child.remove(); - 清空整个容器内容，可用
parent.innerHTML = ''或循环删除，前者更简短，后者更可控
组合使用实现动态渲染
比如渲染待办列表：先用 querySelector 获取容器，遍历任务数组，为每项创建 li 并设置内容，最后统一 append 进去；完成后再点击删除按钮时，找到对应 li 调用 remove() 即可。整个过程无需刷新页面，响应快、逻辑清晰。
