DOM操作時appendChild重複添加元素問題

在學習DOM過程中，用createElement創建元素後，想追加到某個父元素下，用到了appendChild()函數，然後就嘗試了以下執行多次appendChild()，然後發現只添加了一次，並不是想象中添加了多個元素。

  <script>
  <script>
    // 想在body中添加a標籤
    var a=document.createElement("a");
    a.href="https://www.baidu.com";
    a.innerHTML="go to baidu";
    document.body.appendChild(a);
    document.body.appendChild(a);//重複添加元素
    document.body.appendChild(a);
    document.body.appendChild(a);
    var span=document.createElement("span");
    span.innerHTML="123";
    document.body.insertBefore(span,a);
    var span2=document.createElement("span");
    span2.innerHTML="456";
    document.body.appendChild(span2);
    console.log(a);
    // 想在a之前插入input
    var input=document.createElement("input");
    console.log(input);
    document.body.insertBefore(input,a);
    // 用input替換span2
    //document.body.replaceChild(input,span2);//此處消去註釋，會發生input的位置變化
  </script>
  </script>

顯示效果：

然後在菜鳥教程上瞭解到：

定義和用法
appendChild() 方法可向節點的子節點列表的末尾添加新的子節點。
提示：如果文檔樹中已經存在了 newchild，它將從文檔樹中刪除，然後重新插入它的新位置。如果 newchild 是 DocumentFragment 節點，則不會直接插入它，而是把它的子節點按序插入當前節點的 childNodes[] 數組的末尾。
你可以使用 appendChild() 方法移除元素到另外一個元素。

其實，每次引用對象時，都是調用對象的內存地址，所以在循環中對一個對象添加多次，其實都是添加的同一個對象的內存地址，實際對象的數量並沒有增加，就好比你對你女朋友連說六次愛你，不等於就有6個女朋友吧？所以必須在每次循環時都重新創建一個新的對象，這樣系統就會爲這個新對象分配新的內存空間，然後再添加到父元素中纔算是真正的添加。