appendChild 总是将节点添加到父容器末尾，prepend 总是添加到开头，二者均不支持指定位置插入；正确排序应先转数组、再排序、最后用 parent.append(...sorted) 批量挂载以避免重排和状态丢失。
appendChild 与 prepend 的行为差异必须搞清
appendChild 总是把节点加到父容器末尾，prepend 总是加到开头——但它们都不支持“插入到指定位置”。想实现排序（比如按拖拽顺序、按字段值重排），不能只靠这两个方法反复调用，否则会触发大量 DOM 重排，性能崩得很快。
常见错误现象：for 循环里对每个子节点依次 prepend，结果节点顺序完全反了；或者用 appendChild 遍历重挂，实际只是把所有节点“挪到最后”，原顺序丢失。
使用场景中真正需要的是：拿到一组 NodeList（比如 document.querySelectorAll('.block')），按某种规则（如 data-order 值）排序后，一次性把它们按新顺序塞回父容器。
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 先用
Array.from(parent.children)把子节点转成数组，避免直接操作HTMLCollection（它是实时的，排序过程中长度和内容会变） - 用
.sort()按需排序，例如：blocks.sort((a, b) => a.dataset.order - b.dataset.order) - 排序后，**不要逐个
appendChild或prepend**，而是用parent.append(...blocks)——现代浏览器支持传入多个节点，且是原子操作，只触发一次重排
为什么不能用 insertBefore + appendChild 模拟 insertAt
有人试图用 insertBefore 手动实现“插入到第 N 位”，再配合 appendChild 移动节点。这在逻辑上可行，但极易出错：
-
insertBefore(child, referenceChild)中的referenceChild必须是当前父节点的子节点，否则报错Failed to execute 'insertBefore' on 'Node': The refChild is not a child of this node. - 排序过程中节点被频繁移动，
referenceChild很可能已被移走，导致运行时异常 - 多次调用
insertBefore会让浏览器反复重排布局，滚动位置跳动、光标丢失、输入框失焦
性能影响明显：10 个块排序，用单次 append(...sorted) 耗时约 0.2ms；用 10 次 insertBefore 可能超过 8ms，且伴随 UI 卡顿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃“逐个插入”思路，坚持“先收集、再排序、最后批量挂载”三步
- 如果必须保留某个节点的焦点或光标位置（比如编辑中的
contenteditable元素），排序前先记录其selection.getRangeAt(0)，排序后再用range.selectNodeContents(node)恢复 - 避免在排序过程中修改节点的
dataset或 class——这些操作会触发样式重算，进一步拖慢速度
contenteditable 场景下 prepend/appendChild 的副作用
HTML 编辑器里很多区块是 contenteditable="true" 的，这时直接调用 appendChild 或 prepend 会强制浏览器重置光标位置，甚至清空当前选区。
常见错误现象：用户刚在第 3 个段落里打字，点击“升序排序”，光标突然跳到第一个块开头，刚输的字还留在原地但失去焦点，体验极差。
根本原因：DOM 节点被移出再挂回，等于重建渲染上下文，浏览器无法维持原有编辑状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对
contenteditable块排序前，先用window.getSelection()获取当前焦点信息，包括anchorNode、focusOffset等 - 排序完成后，不直接
append，而是用parent.replaceChildren(...sorted)（更干净，且兼容性已覆盖 Chrome 86+/Firefox 76+） - 如果需兼容旧浏览器，用
parent.innerHTML = ''再循环parent.appendChild(block)——虽然略慢，但比光标乱跳可接受
排序本身不难，难的是不让编辑状态丢、不让浏览器反复重绘、不让代码在 IE 或老版 Safari 里崩溃。最稳妥的路径就是：别碰 prepend 和 appendChild 的单次调用，把它们当“最后一步的搬运工”，而不是“排序执行者”。
