将一个div的子元素与所有相关事件复制到另一个div中

Question

将一个div的子元素与所有相关事件复制到另一个div中

3

我正在尝试用另一个

元素newparent替换特定的

元素parent。我想只复制一些parent的子节点并将它们放到newparent中，然后通过newparent替换parent。以下是我的代码片段:

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。有什么解决方法吗？

- R1234

那么出了什么问题？你已经插入了所有的日志记录，记录了什么？ - Eamon Nerbonne

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eamon Nerbonne · Accepted Answer

我没有运行你的代码，但有几个奇怪的地方，也许其中一个会导致问题或帮助澄清代码，以便问题更加明显。

变量temp似乎是sb_button的别名：您可以删除变量声明并将所有引用替换为temp
sb_button对于任意子节点来说是一个令人困惑的名称
您正在if语句中将sb_button节点附加到newparent中，但紧接着您尝试将sb_button_.parentNode设置为parent - 这是不可能的，因为parentNode是只读的，而且肯定没有意义 - 您不能将元素附加到一个元素，但却有不同的父元素。
您是要复制还是移动节点？

编辑： 鉴于你想复制节点，我认为你正在寻找 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);

这个想法是让读者立刻明白所有孩子只被处理一次。