Как создать li для каждого элемента массива?

Question

[Andriy022]

Как создать li для каждого элемента массива?
Вот я как то так пробовал, но не знаю где вставить user чтобы li было столько сколько элементов в массиве

let arr = ['Main', 'Products', 'About us', 'Contacts']
let menu = document.getElementsByClassName('menu')[0]
let li = document.createElement('li')

let user = (param1, param2) => {
    for (const user of param2) {
        li.innerText = user
        param1.append(li)
    }
}
user(menu, arr)

Answer 1

[0xD34F]

menu.insertAdjacentHTML('beforeend', arr
  .map(n => `<li>${n}</li>`)
  .join('')
);

// или

menu.append(...arr.reduce((acc, n) => (
  (acc[acc.length] = document.createElement('li')).textContent = n,
  acc
), []));

// или

for (const n of arr) {
  menu.appendChild(document.createElement('li'));
  menu.lastChild.innerText = n;
}

// или

arr.forEach(n => {
  const li = document.createElement('li');
  li.insertBefore(new Text(n), null);
  menu.insertBefore(li, null);
});

// или

(function add(i) {
  if (i < arr.length) {
    menu.insertAdjacentElement('beforeend', document.createElement('li'));
    menu.children[~-menu.children.length].innerHTML = arr[i];
    add(-~i);
  }
})(0);

Answer 2

[ZB Venom]

Объявите переменную li внутри цикла.

let arr = ['Main', 'Products', 'About us', 'Contacts']
let menu = document.getElementsByClassName('menu')[0]

let user = (param1, param2) => {
    for (const user of param2) {
        let li = document.createElement('li')
        li.innerText = user
        param1.append(li)
    }
}
user(menu, arr)