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中原来存在的元素也可以用这种方法改变位置