javascript - 无法使用node.insertBefore()方法注入(inject)DOM元素

Question

我有一个按字母顺序排序的项目列表。这个想法是注入(inject)来自 alphabetArr 的相应字母。 <li> 之后的数组ID 为 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();

Answer 1

在当前代码中，您只需创建一个元素，然后迭代并更新其内容，然后在下一个循环中获取元素，最后仅使用最后一个值调用 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 && 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();