const array = [
    {
        id: 1,
        text: "DOREAMON"
    },
    {
        id: 2,
        text: "NOBITA"
    },
    {
        id: 3,
        text: "SIZUKA"
    },
    {
        id: 4,
        text: "GIYAN"
    },
    {
        id: 5,
        text: "SUNIYO"
    },
    {
        id: 6,
        text: "DEKISUGI"
    },
];

const app = document.querySelector("#user-list");
const textNode= document.createTextNode("");
app.append(textNode);

let lookup = new Map();
const insertList = () => {
    const source = /** SOURCE */ array;
    const set = new Set();
    const newLookup = new Map();
    let anchor = textNode;

    for(const index in source) {
        const key = /** KEY */ source[index].id;
        if (set.has(key)) {
            console.log("KEY IS ALREADY EXIST:", key);
        } else set.add(key);
    
        let child = lookup.get(key);
        /**
         * TODO:
         * Need to append IF
         *    if child is null/undefined
         *    OR ( anchor != textNode AND anchor.nextSibling != child)
         */
        if (!child) {
            child = document.createElement("div");
            child.textContent = source[index].text;
        }
    
        lookup.delete(key);
        newLookup.set(key, child);
    
        // TODO: Do I need it to append or it is already at the right place
        app.insertBefore(child, anchor.nextSibling);
        anchor = child;
    }

    for(const el of lookup.values()) {
        app.removeChild(el);
    }

    lookup = newLookup;
}

如果我运行insertList函数，那么它会创建元素并追加到#user-list元素。工作正常。但当我从数组中删除第一个元素时，再次运行insertList函数。它会再次追加#user-list中的每个子元素，但它应该只从dom中删除第一个节点，而不需要再次追加元素。
我尝试了nextSibling()和previousSibling()来检查当前子节点是否是上一个子节点的相邻节点，那么我就不需要追加。但是这次nextSibling()和previousSibling()都不起作用。