appendChild()方法遇到的問題

在使用appendChild()方法中遇到了一個問題：

下面的代碼可以正常插入多個新元素

　　
　　<input type="button" value="在后面插入新元素" id="btn6">
　　<div id="dv7">
        <p>a</p>
        <span>b</span>
        <h3>c</h3>
    </div>
    <script>
        var dv7 = document.getElementById("dv7");
        document.getElementById("btn6").onclick = function(){       
            var newElement = document.createElement("input");   //創造一個新元素
            newElement.type = "button";
            newElement.value = "新元素";

            dv7.appendChild(newElement);    //在dv7的內部的最后插入新元素
        };
    </script>

下面的代碼則無法實現

   <input type="button" value="在后面插入新元素" id="btn6"> 
　　<div id="dv7">
        <p>a</p>
        <span>b</span>
        <h3>c</h3>
    </div>
    <script>
        var dv7 = document.getElementById("dv7");
         var newElement = document.createElement("input");   //創造一個新元素
            newElement.type = "button";
            newElement.value = "新元素";
        document.getElementById("btn6").onclick = function(){       
            dv7.appendChild(newElement);    //在dv7的內部的最后插入新元素
        };
    </script>

查找資料發現一段話：如果文檔樹中已經存在了 newchild，它將從文檔樹中刪除，然后重新插入它的新位置。

第一種方法中，每一次點擊事件都會創造一個新元素，雖然名字相同但已經不是那一個元素了（點擊事件結束newElement被釋放），所以appendChild操作的新元素沒有在DOM樹中存在，可一多次插入新元素。

第二種方法中，創建newElement在點擊事件之外，屬於DOM樹中的這個確定的新元素，多次觸發點擊事件，不能實現多次插入。

你可以使用 appendChild() 方法將一個元素移動到另外一個地方

例：下面的代碼點擊兩個按鈕，新元素位置會變化

        <input type="button" value="在后面插入新元素" id="btn6">
        <input type="button" value="改變新元素的位置" id="btn7">
        <div id="dv7">
        <p id="new">a</p>
        <span>b</span>
        <h3>c</h3>
    </div>
    <script>
        var dv7 = document.getElementById("dv7");
         var newElement = document.createElement("input");   //創造一個新元素
            newElement.type = "button";
            newElement.value = "新元素";
        document.getElementById("btn6").onclick = function(){       
            dv7.appendChild(newElement);    //在dv7的內部的最后插入新元素
        };
        document.getElementById("btn7").onclick = function(){       
            document.getElementById("new").appendChild(newElement);    //在p標簽內部的后面插入這個新元素
        };
    </script>   

 不僅對創建的新元素，DOM中原來存在的元素也可以用這種方法改變位置