javascript - 将一个部门的子元素与所有相关事件一起复制到另一部门

我试图用另一个parent替换某个div元素newparent。我只想复制parent的一些子项，然后将它们放在newparent中，然后将parent替换为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是任意子节点

的混淆名称

您将在if语句中将sb_button中的节点附加到newparent中，但是在您尝试将sb_button_.parentNode设置为parent时-即not possible since parentNode is readonly，这当然没有意义-您无法将元素附加到一个元素中但有不同的 parent

您是否要复制或移动节点？

编辑:鉴于您要复制节点，我相信您正在寻找 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);

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