Javascript 未按 ID 找到 DOM 元素

Question

I have a div on my page:

<div id="report"></div>

I'm trying to convert a filtered array to nested ULs within that div using this:

  let arr = csvData.filter(row => unchecked.includes(row[0]))
  
  console.log(arr);
  
  const div = document.getElementById("report");
  
  const prepareUL = (root, arr) => {
   let ul = document.createElement('ul');
   let li;
   root?.appendChild(document.createElement('ul'));
   arr.forEach(function(item) {
      if (Array.isArray(item)) {
         prepareUL(li, item);
         return;
      };
      li = document.createElement('li');
      li.appendChild(document.createTextNode(item));
      ul.appendChild(li);
   });
}

  
  prepareUL(div, arr);

If I do not check for the existence of the root, I get an error reading appendchild of undefined. I am running the javascript deferred. The array logs properly to the console. Weirdly, if I just:

div.innerHTML = arr;

UPDATE: if I change the array to a simple assigned array, like:

const arr = [
   'Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'],
   'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6'
];

It also works.

it populates the div with the (unformatted) array. So why would the innerHTML not have an issue finding the element, but the above function cannot?

Help is much appreciated.

Answer 1

Inside your forEach you call

prepareUL(li, item);

At that point, li is undefined , thus inside prepareUL(root, arr) root will be undefined .

Answer 2

As connexo pointed out li is undefined when you recursively call prepareUL function. So creating li before calling prepareUL is probably the right thing to do.

 let arr = ['url', 'url1', ['url2', 'url3', 'url4']] const div = document.getElementById("report"); const prepareUL = (root, arr) => { let ul = document.createElement('ul'); root.appendChild(ul); arr.forEach(function(item) { let li = document.createElement('li'); if (Array.isArray(item)) { prepareUL(li, item); ul.appendChild(li); return }; li.appendChild(document.createTextNode(item)); ul.appendChild(li); }); } prepareUL(div, arr);

 <div id="report"></div>