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

Question

我正在尝试替换某个 div 元素 parent和另一个newparent .我只想复制 parent 的一部分的 child 并把他们放在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 .解决方法是什么？

Answer 1

我没有运行你的代码，但有一些奇怪的事情，也许其中之一可能会导致问题或帮助清理代码，使问题更加明显。

• 变量 temp 似乎是 sb_button 的别名:您可以删除变量声明并将所有引用替换为 temp
• sb_button 是一个容易混淆的任意子节点的名字
• 您在 if 语句中将 sb_button 中的节点附加到 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);

这样做的目的是让读者立即明白所有子级只处理一次。