appendChild追加元素問題

時間 2019-12-04

標籤 appendchild 追加元素問題简体版

原文原文鏈接

問題

在寫東西的時候用appendChild爲li標籤兩次追加相同內容，結果卻頁面只出現了一個li標籤node

緣由

appengChild是把一個元素（對象）追到到另外一個元素上，可是這個追加實際上是"剪切"的意思。也就是說，若是追加同一個元素（對象），實際上只是追加了一個元素，這就是我所出現的那個問題。app

<body>
    <ul id="list">
  
    </ul>
      <script>
        var list = document.getElementById("list");
        var li1 = document.createElement("li");
        li1.innerHTML = 'a';
        for(var i = 0; i < 3; i++) {
          list.appendChild(li1);
        }
      </script>
    </body>

效果如圖：屢次追加同一元素（對象），頁面只出現一個
函數

或者換個方式來講，用appendChild爲ul追加了一個li標籤，li標籤裏面的內容是a，而後又追加了一個li，內容是b，再把內容爲a的li標籤從新追加一次，你會發現原來頁面是a,b，可是如今卻變成了b,a。spa

<body>
    <ul id="list">
      
    </ul>
      <script>
        var list = document.getElementById("list");
        var li1 = document.createElement("li");
        var li2 = document.createElement("li");
        li1.innerHTML = 'a';
        li2.innerHTML = 'b';
        list.appendChild(li1);
        list.appendChild(li2);
        list.appendChild(li1);
      </script>
    </body>

效果以下：
code

預期效果是a、b、a，但實際倒是b、a。這就是所說的appendChild追加是一種"剪切"效果。追加同一個元素，第二次之後追加的不是沒有做用，而是爲只是處理同一個元素（對象），這樣就會把以前有過同樣的元素直接拿過來用，因此順序不同，就至關於"剪切"。對象

解決辦法

寫一個建立DOM對象函數，每次追加調用該函數圖片
使用克隆節點（cloneNode）ip

建立函數以下：

<body>
    <ul id="list">
    
    </ul>
    <script>
    window.onload = function() {
        function change(element, nodelist) {
            var oDiv = document.createElement(element);
            oDiv.innerHTML = nodelist;
            return oDiv;
        }
        var list = document.getElementById("list");
        list.appendChild(change("li", "a"));
        list.appendChild(change("li", "b"));
        list.appendChild(change("li", "a"));
    }
    </script>
</body>

效果如圖：
element

克隆節點以下：

<body>
    <ul id="list">

    </ul>
    <script>
    window.onload = function() {
        var list = document.getElementById("list");
        var li1 = document.createElement("li");
        var li2 = document.createElement("li");
        li1.innerHTML = 'a';
        li2.innerHTML = 'b';
        list.appendChild(li1);
        list.appendChild(li2);
        // cloneNode傳遞一個布爾值，true表明克隆，false不克隆
        list.appendChild(li1.cloneNode(true));         
    }
    </script>
</body>

效果跟第種方法同樣。get

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。