将一个分区的子元素与所有关联的事件一起复制到另一个分区

Copying children elements of one division to another along with all associated events

本文关键字：分区 关联 事件 一起 另一个 复制 元素 一个      更新时间：2023-09-26

我正在尝试用另一个元素newparent替换某个div元素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。解决方法是什么？

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

  • 变量temp似乎是sb_button的别名：您可以删除变量声明并用temp替换所有引用
  • sb_button是任意子节点的混淆名称
  • 您正在if语句中将sb_button中的节点附加到newparent，但就在您尝试将sb_button_.parentNode设置为parent之后-这是不可能的，因为parentNode是只读的，当然没有意义-您不能将元素附加到一个元素，而是有一个不同的父元素
  • 您正在尝试复制或移动节点吗

编辑：如果您想要复制节点，我相信您正在寻找cloneNode：制作节点的副本并附加该副本，而不是原始节点。

作为一个干净的设计问题，当事情变得复杂时，我会避免这种难以推理的while循环。相反，只需创建一个节点数组，按照您想要的方式对这些节点进行排序（您甚至可以使用sort来执行此操作，以立即表明您只是在重新排列），然后创建一个函数，该函数接受newparent和数组，并将数组中所有元素的副本附加到newparent。您的示例没有那么复杂，但即使在这里，我也会更改if子句的顺序，使其在最后的else中包含"default"大小写。例如：

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);

这样做的目的是让读者立刻明白，所有的孩子都被处理了一次。

相关文章：