Блог

У меня есть список элементов, отсортированных в алфавитном порядке. Идея заключалась в том, чтобы внедрить соответствующую букву из alphabetArr массива after <li> с идентификатором из DOMElementsArr массива. Что я делаю не так?

В консоли нет ошибок, но это не работает.

Массивы:

 let alphabetArr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p",
    "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

let DOMElementsArr = ['8MM', ... ,'Daddy_Day_Care']
  

Вот мой подход:

 //create function that injects new element
function insertAfter(el, referenceNode) {
  referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

//function that loops through both arrays
function injectAllAlphabetLetters(){

  //Create new element
  let newEl = document.createElement('li');
  newEl.className = 'titles alphabet';

  for (let i = 0; i < alphabetArr.length; i  ){
  console.log(alphabetArr[i]);
  newEl.innerHTML = alphabetArr[i][0];
  }

  let ref; 

  for (let j = 0; j < DOMElementsArr.length; j  ){
    console.log(DOMElementsArr[j]);
    ref = document.getElementById(DOMElementsArr[j]);
  }

  insertAfter(newEl, ref);
}

injectAllAlphabetLetters();
  

В вашем текущем коде вы просто создаете один элемент, затем повторяете и обновляете его содержимое, затем получаете элемент в следующем цикле и, наконец, вы вызываете insertAfter функцию только один раз с последними значениями.

Чтобы это заработало, вам нужно объединить оба цикла, а затем переместить код вставки в цикл.

 //create function that injects new element
function insertAfter(el, referenceNode) {
  referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

//function that loops through both arrays
function injectAllAlphabetLetters() {
  // iterate until last element of minimum length array(to avoid problem in case array length are different)
  for (let i = 0; i < alphabetArr.length amp;amp; i < DOMElementsArr.length; i  ) {    
    //Create new element and set properties
    let newEl = document.createElement('li');
    newEl.className = 'titles alphabet';    
    newEl.innerHTML = alphabetArr[i][0];

    // get the element based on id
    let ref = document.getElementById(DOMElementsArr[i]);    
    // call function to insert
    insertAfter(newEl, ref);
  }

}

injectAllAlphabetLetters();