I am facing an issue with a sorted list of items displayed alphabetically. My intention was to insert a corresponding letter from the alphabetArr array after each <li> element, using an id from the DOMElementsArr array. However, I seem to be missing something crucial in my implementation.
Although there are no errors in the console, the functionality is not working as expected.
The arrays in question are as follows:
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']
This is my current approach:
// Function to insert new element
function insertAfter(el, referenceNode) {
referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}
// Function to loop 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();