如何将第一个元素插入列表？

Question

我尝试使用appendChild和cloneNode来插入带有锚点的 li 标签

    let alphabet = document.querySelector('.alphabet');
    let ul = document.createElement("ul");
    let li = document.createElement("li");
    let anchor = document.createElement('a');
    ul.className = "alphabet__list";
    alphabet.appendChild(ul);
    let arr_RU = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ё', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я'];

    for (i = 0; i < arr_RU.length; i++) {
        li.className = "alphabet__item";
        anchor.href = '#'+arr_RU[i];
        anchor.innerText = arr_RU[i];      
        ul.appendChild(li.cloneNode(true));
        li.appendChild(anchor);     
 }}

但首先a标签不在列表中。 如何解决？

Answer 1

Append 在将li附加到ul之前anchor到li

 let alphabet = document.querySelector('.alphabet'); let ul = document.createElement("ul"); let li = document.createElement("li"); let anchor = document.createElement('a'); ul.className = "alphabet__list"; alphabet.appendChild(ul); let arr_RU = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ё', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я']; for (i = 0; i < arr_RU.length; i++) { li.className = "alphabet__item"; anchor.href = '#' + arr_RU[i]; anchor.innerText = arr_RU[i]; li.appendChild(anchor); // changed here ul.appendChild(li.cloneNode(true)); }

 <div class='alphabet'> </div>

Answer 2

您还可以将a和li元素的创建移动到循环内部，这将使代码更具可读性且不易出错，如下所示：

 let alphabet = document.querySelector(".alphabet"); let ul = document.createElement("ul"); ul.className = "alphabet__list"; alphabet.appendChild(ul); let arr_RU = [ "А", "Б", "В", "Г", "Д", "Е", "Ё", "Ж", "З", "И", "Й", "К", "Л", "М", "Н", "О", "П", "Р", "С", "Т", "У", "Ф", "Х", "Ц", "Ч", "Ш", "Щ", "Э", "Ю", "Я", ]; for (i = 0; i < arr_RU.length; i++) { let anchor = document.createElement("a"); anchor.href = "#" + arr_RU[i]; anchor.innerText = arr_RU[i]; let li = document.createElement("li"); li.className = "alphabet__item"; li.append(anchor); ul.append(li); }

 <div class="alphabet"></div>

Answer 3

您可以在每次迭代时重新创建元素，不需要cloneNode() ，还可以切换附加顺序。 首先 append a到li然后 append li到ul 。

您遇到的问题是您首先将一个空的li克隆附加到ul ，然后将一个a附加到原始li ，这与您刚刚附加的克隆不同。 在第二次迭代中，原始li现在包含a ，然后您再次clone它， append 克隆到ul中，这就是为什么您没有获得第一次迭代的值的原因。

 let alphabet = document.querySelector('.alphabet'); let ul = document.createElement("ul"); ul.className = "alphabet__list"; alphabet.appendChild(ul); let arr_RU = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ё', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я']; for (let i = 0; i < arr_RU.length; i++) { let li = document.createElement("li"); let anchor = document.createElement('a'); li.className = "alphabet__item"; anchor.href = '#'+arr_RU[i]; anchor.innerText = arr_RU[i]; li.appendChild(anchor); ul.appendChild(li); }

 <div class="alphabet"></div>