將一個部門的子元素以及所有相關事件復制到另一個部門

Question

我正在嘗試用另一個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 。 解決方法是什么？

Answer 1

我沒有運行你的代碼，但是有一些奇怪的事情，也許其中之一可能會導致問題或幫助清理代碼，因此問題更加明顯。

• 變量temp似乎是sb_button的別名：您可以刪除變量聲明並將所有引用替換為temp
• sb_button是任意子節點的混淆名稱
• 您在 if 語句sb_button中的節點附加到newparent ，但是在您嘗試將sb_button_.parentNode設置為parent之后 - 這是不可能的，因為parentNode是只讀的，它當然沒有意義 - 你不能append 元素為一個元素，但具有不同的父元素。
• 您是否要復制或移動節點？

編輯：鑒於您要復制節點，我相信您正在尋找cloneNode ：復制節點和 append 該副本，而不是原始節點。

作為一個干凈的設計問題，當事情變得復雜時，我會避免這種難以理解的 while 循環。 相反，只需制作一個節點數組，按照您想要的方式對它們進行排序（您甚至可以使用sort來做到這一點，以使您立即清楚您只是在重新排列事物），然后制作一個 function ，它需要一個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);

這個想法是讓讀者立即明白所有孩子都只處理一次。