CODEWITHSUNDEEP
javascript
Slip
Slip

Reputation: 949

How to insert first element to list?

I try to use appendChild with cloneNode to insert li tags with anchors

    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);     
 }}

enter image description here

But first a tag are not in the list. How to solve it?

Upvotes: 0

Views: 132

Answers (3)

Ivan86
Ivan86

Reputation: 5708

You can re-create the elements on every iteration, no need for cloneNode(), and also switch the order of appending. First append the a to the li then append the li to the ul.

The problem you are having is that you are first appending an empty li clone to the ul, then you are appending an a to the original li, which is not the same as the clone you just appended. On the second iteration the original li now contains the a and you then clone it again and append the clone into the ul, which is why you don't get a value for the first iteration.

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>

Upvotes: 1

Lu&#237;s Ramalho
Lu&#237;s Ramalho

Reputation: 10208

You could also move the creation of the a and li elements to inside the loop which would make the code a bit more readable and less error-prone, like so:

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>

Upvotes: 1

brk
brk

Reputation: 50291

Append anchor to li before appending li to ul

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>

Upvotes: 3

Related Questions