3

我正在尝试parent用另一个替换某个 div 元素newparent。我只想复制一些parent的孩子并将它们放入newparent,然后替换parentnewparent。这是我的代码片段:

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. 解决方法是什么?

4

1 回答 1

4

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

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

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

作为一个干净的设计问题,当事情变得复杂时,我会避免这种难以理解的 while 循环。相反,只需创建一个节点数组,按照您想要的方式对它们进行排序(您甚至可以使用sort它来立即表明您只是在重新排列事物),然后创建一个函数,该函数采用 anewparent和数组并附加副本以数组顺序排列的所有元素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);

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

于 2011-06-06T07:27:12.950 回答