JS移動DOM節點，將某節點下所有子節點移動（剪切）到另一個節點下。新手很容易踩的坑！

• 題目(新手練習題)
• BUG
• • 第一種錯誤
  • 第二種錯誤
• 解決方案
• • 第一種解決方案（無循環）
  • 第二種解決方案
  • 第三種解決方案（推薦）
• 總結

重點：移動完一個非尾部節點之后，后面的節點會依次部位上來，并且節點數據的長度會實時變化！！

題目(新手練習題)

將上方綠色實線框中的兩個列表移動（剪切）到下方綠色虛線框中。
ps：
1、綠色實線框被一個div包裹，綠色虛線框被一個div包裹；
2、綠色實線框中的子節點有兩個，分別是圓點樣式的列表和圓圈樣式的列表。
3、要求點擊下方的剪切按鈕，將綠色實線框中的兩個子節點移動到綠色虛線框中。
4、若div中僅有一個節點，那么這道題很簡單，沒有什么坑，但是多個節點就可能會踩坑～～～

BUG

先行知識點：
1、節點A.appendChild(節點B);若B為新創建的節點，則將節點B添加為節點A的子節點。
1、節點A.appendChild(節點B);若B為另外一個節點的子節點，則將節點B剪切到節點A的子節點。

第一種錯誤

代碼如下：

function cut_bug(){var upperDiv = document.getElementById("div1"); //通過id獲取上方div節點var upperUl = upperDiv.children; //取上方div節點的所有子節點var belowNode = document.getElementById("div2"); //通過id獲取下方div節點//我們先不用循環，用最簡單的方式，試著將子節點移動過去belowNode.appendChild(upperUl[0]);belowNode.appendChild(upperUl[1]);}

運行結果如下：

解析：
UncaughtTypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
未捕獲的類型錯誤：不能在節點上執行appendChild操作：參數1不是節點類型。

從錯誤中可以看出，參數0沒有問題，而參數1出了問題；利用upperDiv.childElementCount方法獲取upperUl數組的長度，可以看出長度為2，確實是應該從upperUl數組中獲取兩次數據。
實際上，每執行一次移動操作，節點就會實時減少，我們從首部直接取出第0個，那么第1個元素會直接補位來到第0個。
所以，我們可以每次都取0，取upperUl數組的長度次；我們還可以從尾部取到頭部（注意：尾部這樣的方式會使剪切之后所有元素倒過來）。具體實現代碼在后面。

第二種錯誤

代碼如下：

function cut_bug(){var upperDiv = document.getElementById("div1");var upperUl = upperDiv.children;var belowNode = document.getElementById("div2");//我們不妨試試從上面吸取教訓，每次取0，再加入循環的操作for (var i = 0; i < upperUl.length; i++) {belowNode.appendChild(upperUl[0]);}}

運行結果如下：

解析：
這次沒有報錯，但是運行結果好像有點差強人意啊，怎么就只移動了一個呢？
問題出在for (var i = 0; i < upperUl.length; i++) 的i < upperUl.length，因為upperUl.length是實時變化的，i每增加一次（append成功一次），upperUl.length就減少一次，結果就是，如果共有n個子節點，最后只能移動n/2個子節點。
所以，我們可以每次利用一個變量在循環之前（append操作之前）存儲upperUl.length，保證i的循環終止條件不變。

解決方案

第一種解決方案（無循環）

//這個剪切完之后是正序的。
function cut(){

var upperDiv = document.getElementById("div1");var upperUl = upperDiv.children;var len = upperDiv.childElementCount;var belowNode = document.getElementById("div2");belowNode.appendChild(upperUl[0]);belowNode.appendChild(upperUl[0]);}

//這個剪切完之后是反序的。
function cut(){

var upperDiv = document.getElementById("div1");var upperUl = upperDiv.children;var belowNode = document.getElementById("div2");belowNode.appendChild(upperUl[1]);belowNode.appendChild(upperUl[0]);}

第二種解決方案

//這個剪切完之后是反序的。 function cut(){var upperDiv = document.getElementById("div1");var upperUl = upperDiv.children;var len = upperDiv.childElementCount;var belowNode = document.getElementById("div2");for (var i = len - 1; i >=0; i--) {belowNode.appendChild(upperUl[i]);}}

第三種解決方案（推薦）

function cut(){var upperDiv = document.getElementById("div1");var upperUl = upperDiv.children;var len = upperDiv.childElementCount;var belowNode = document.getElementById("div2");for (var i = 0; i < len; i++) {belowNode.appendChild(upperUl[0]);}}

總結

移動完一個非尾部節點之后，后面的節點會依次部位上來，并且節點數據的長度會實時變化！！

剛剛接觸JS，想著記錄一下自己遇到的問題，如果能幫到大家就更好了，有錯誤希望大家提出來～～

總結

以上是生活随笔為你收集整理的JS移动DOM节点，将某节点下所有子节点移动（剪切）到另一个节点下。新手很容易踩的坑！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。