將一個分部的子元素複製到另一個以及所有相關事件

Question

我試圖用另一個分隔符parent替換另一個newparent。我只想複製一些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替換所有的引用是一個令人困惑的名字對於任意子節點
• 要追加的在sb_button到newparent之間的節點在if語句中，但在你試圖設置sb_button_.parentNode到parent之後 - 這就是not possible since parentNode is readonly，它肯定沒有任何意義 - 你不能將元素追加到一個元素，但有一個不同的父元素。
• 你想複製或移動節點？

編輯：因爲要複製的節點，我相信你正在尋找cloneNode：使節點的副本，並追加該副本，而不是原來的節點。

作爲一個乾淨的設計，當事情變得複雜時，我會避免這種難以理解的while循環。相反，只需製作一個節點陣列，按照你想要的方式排列這些節點（你甚至可以用sort來做到這一點，以便立即明白你只是重新排列了一些東西），然後創建一個函數，該函數需要一個newparent以及該數組和按陣列順序將所有元素的副本追加到newparent。你的例子並不那麼複雜，但即使在這裏，我也會改變if-clause的順序，以便在最後的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); 

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