无需全量调用appendChild实现UL列表重排更新的方法

核心原理 #

焦点丢失问题的本质是：全量删除DOM节点、或对节点执行先移除再挂载的操作时，浏览器会销毁节点状态（包括文本选中范围、输入焦点）。但如果是对已经存在于DOM树中的节点直接执行移动操作（调用insertBefore/appendChild传入已挂载的节点），浏览器只会调整节点在DOM树中的位置，不会销毁重建节点，完全不会打断用户的选中、输入操作。

你写的第二个增量更新方案方向完全正确，仅存在两处逻辑bug导致行为不符合预期，整体思路不需要推翻重写。

正确实现步骤 #

整个同步过程只做最小化DOM操作，没有多余的删除/重挂载动作：

• 先给当前已有的列表项建立name -> LI元素的映射表，避免重复遍历查找
• 遍历目标数据数组，按顺序组装最终的节点列表：
  • 匹配到已有节点：仅当内容变化时更新节点文本，随后将该节点从映射表中移除（映射表最终剩余的就是需要删除的废弃节点）
  • 未匹配到节点：新建LI元素，设置对应属性和内容
• 批量删除映射表中剩余的、目标数据里不存在的旧节点
• 按目标顺序逐位对比当前列表的子节点：如果当前位置的节点和目标节点不一致，直接将目标节点插入到对应位置即可——这个操作是移动而非重建，不会丢失焦点

修正后的可运行代码 #

const updatedArray = [
    {name: "john", colour: "red"},
    {name: "phil", colour: "blue"},
    {name: "jane", colour: "orange"},
    {name: "suzie", colour: "orange"},
    {name: "casey", colour: "purple"},
];

const list = document.getElementById("list");
// 建立现有项的映射表
const currentItemMap = new Map();
list.querySelectorAll(".listItem").forEach(item => {
    currentItemMap.set(item.dataset.name, item);
});

const orderedItems = [];
for (const itemData of updatedArray) {
    let node = currentItemMap.get(itemData.name);
    if (node) {
        // 仅内容变化时更新
        if (node.textContent !== itemData.colour) {
            node.textContent = itemData.colour;
        }
        // 从映射表移除，剩下的就是要删除的项
        currentItemMap.delete(itemData.name);
    } else {
        // 新建不存在的节点
        node = document.createElement("LI");
        node.className = "listItem";
        node.dataset.name = itemData.name;
        node.textContent = itemData.colour;
    }
    orderedItems.push(node);
}

// 删除所有不存在于新数据中的旧节点
currentItemMap.forEach(node => node.remove());

// 按顺序调整节点位置，仅移动位置不对的节点
for (let i = 0; i < orderedItems.length; i++) {
    const targetNode = orderedItems[i];
    // 当前位置节点正确则跳过
    if (list.children[i] === targetNode) continue;
    // 插入到对应位置，若i等于当前子节点长度则自动追加到末尾
    list.insertBefore(targetNode, list.children[i] || null);
}

额外优化说明 #

• 上述实现中所有对已存在节点的操作都是原地更新或直接移动，没有任何先删后加的动作，完全不会打断用户的文本选中、输入焦点
• 所有DOM操作都是最小粒度的，没有多余的重排重绘，性能远高于全量重建的方案
• 如果单次更新新增节点较多，可以把新建的节点先放入DocumentFragment中再一次性插入，进一步减少重排次数，但对焦点状态没有影响
• 不需要引入第三方虚拟DOM库，这个逻辑本身就是虚拟DOM列表diff的核心最小实现，足够应对绝大多数定期更新列表的业务场景

内容的提问来源于stack exchange，提问作者Geidt