使用getElementsByClassName而不是getElementById將腳本修改爲appendChild

Question

我正在使用下面發現​​的腳本來生成目錄。

目前它將一個目錄附加到一個ID。我想使用getElementsByClassName在同一頁面上添加兩次目錄。

我知道我需要遍歷元素數組，但我無法獲得正確的語法。

任何幫助，非常感謝。

// External code for generating a simple dynamic Table of Contents 
function generateTableOfContents(els) { 
    var anchoredElText, 
     anchoredElHref, 
      ul = document.createElement('UL'); 

    document.getElementById('table-of-contents').appendChild(ul); 

    for (var i = 0; i < els.length; i++) { 
    anchoredElText = els[i].textContent; 
     anchoredElHref = els[i].querySelector('.anchorjs-link').getAttribute('href'); 
    addNavItem(ul, anchoredElHref, anchoredElText); 
    } 
} 

function addNavItem(ul, href, text) { 
    var listItem = document.createElement('LI'), 
      anchorItem = document.createElement('A'), 
     textNode = document.createTextNode(text); 

    anchorItem.href = href; 
    ul.appendChild(listItem); 
    listItem.appendChild(anchorItem); 
    anchorItem.appendChild(textNode); 
} 

Example of getElementById

Answer 1

你要碰到的問題在那裏。一個元素只能附加到文檔一次。如果您嘗試將其追加到其他地方，它將首先從當前位置移除。

避免這種情況的一種可能的解決方案是使用cloneNode。

使用ES5 forEach，你的函數的一個可能的版本是：

function generateTableOfContents(els) { 
    var anchoredElText, anchoredElHref, 
     ul = document.createElement('UL'); 

    for (var i = 0; i < els.length; i++) { 
     anchoredElText = els[i].textContent; 
     anchoredElHref = els[i].querySelector('.anchorjs-link').getAttribute('href'); 
     addNavItem(ul, anchoredElHref, anchoredElText); 
    } 

    // We have to use call here, because getElementsByClassName returns an array-like, not an actual array 
    [].forEach.call(document.getElementsByClassName('table-of-contents'), function(el) { 
     el.appendChild(ul.cloneNode(true)); 
    }); 

    // Alternative to the 3 above lines using a for 
    // var tocs = document.getElementsByClassName('table-of-contents'); 
    // for (var i = 0; i < tocs.length; i++) { 
    // tocs[i].appendChild(ul.cloneNode(true)); 
    // } 
}