我正在尝试将另一个div元素父级替换为另一个newparent.我只想复制父母的一些孩子并将其放在newparent中,然后将父母替换为newparent.
这是我的代码片段：

var sb_button = parent.firstChild;
    var temp;
    while(sb_button) {
        console.log("loop: ");
        console.log(sb_button.id);
        temp = sb_button;
        if(sb_button.id != curr_button.id && sb_button.id != prev_button.id) {
            console.log("if");
            newparent.appendChild(temp);
            }
        else if(sb_button.id == curr_button.id) {
            console.log("elseif");
            newparent.appendChild(temp);
            newparent.appendChild(prev_button);
            }
        else {
            console.log("else");
            }
        sb_button.parentNode = parent;
        console.log(sb_button.id)
        console.log(sb_button.parentNode.children);
        sb_button = sb_button.nextSibling;
        }
    parent.parentNode.replaceChild(newparent,parent);

编辑：

因此,当我执行newparent.appendChild(temp)时,它会修改sb_button.有什么解决方法？

解决方法:

我没有运行您的代码,但是有一些奇怪的事情,也许其中之一可能会导致问题或帮助清除代码,从而使问题更加明显.

>变量temp似乎是sb_button的别名：您可以删除变量声明并将所有引用替换为temp
> sb_button是任意子节点的混乱名称
>您要将sb_button中的节点附加到if语句中的newparent上,但是在您尝试将sb_button_.parentNode设置为parent时刚好-not possible since parentNode is readonly,这当然没有意义-您无法将元素附加到一个元素,但具有不同的父元素.
>您是否要复制或移动节点？

编辑：鉴于您要复制节点,我相信您正在寻找cloneNode：制作该节点的副本并追加该副本,而不是原始节点.

就整洁的设计而言,当事情变得复杂时,我会避免这种难以理解的while循环.取而代之的是,简单地制作一个节点数组,按所需方式排序(您甚至可以使用sort进行排序,以使您马上就可以清楚地知道正在重新排列事物),然后制作一个函数,该函数需要一个newparent以及该数组和将所有元素的副本按数组顺序追加到newparent.您的示例并不那么复杂,但是即使在这里,我也会更改if子句的顺序,以在最后的else中使用“默认”情况.例如.：

for(var child = parent.firstChild; child; child = child.nextSibling) 
    if(child.id == curr_button.id) { //insert prev_button after curr_button
        newparent.appendChild(child.cloneNode(true));
        newparent.appendChild(prev_button.cloneNode(true));
    } else if(child.id != prev_button.id) {
        newparent.appendChild(child.cloneNode(true));
    }
parent.parentNode.replaceChild(newparent, parent);

这样做的目的是使读者立即清楚地看到所有孩子都只被处理了一次.