создать блок(меню ul>li) в js без использования html

216

16 мая 2022, 02:40

Нужно сделать меню(ul>li*5) в js без html, изначально body в файле index.html должен быть пустой, все необходимые элементы генерируются с использованием JS Как можно сделать проще, чтоб не создавать каждый li вручную?

const menu = document.createElement('ul');
menu.className = 'menu';
document.body.prepend(menu)
const menuItem= document.createElement('li');
menuItem.className = 'menu__item';
menuItem.innerHTML = 'пункт 1'
menu.append(menuItem)

Answer 1

я предположу что вот так

для начала создадим object с именами и ссылками и потом его распарсим

тег h1 вставил просто так - что бы показать что вставили список до первого элемента на странице

информацию брал здесь

let list = [{
    name: "num1",
    link: "http://google.com"
  },
  {
    name: "num2",
    link: "http://yandex.com"
  },
  {
    name: "num3",
    link: "http://yahho.com"
  }
];
let ul = document.createElement("ul");
let ocum = "";
for (lis in list) {
  ocum += `<li title=" ${list[lis].link} ">
              <a href=" ${list[lis].link} " > ${list[lis].name}</a>
            </li>`;
}
ul.innerHTML = ocum;
document.querySelector("body").prepend(ul);

<h1>hello word</h1>

Answer 2

let col = 5,
    menu = document.createElement('ul');
for(let i = 0; i < 5; i++) {
  let li = document.createElement('li');
  li.className = 'menu__item';
  li.innerHTML = 'пункт '+(i+1);
  menu.append(li);
};
menu.className = 'menu';
document.body.prepend(menu);

По массиву

let arr = [
      'пункт 1',
      'пункт 2',
      'пункт 3',
      'пункт 4',
      'пункт 5'
    ],
    menu = document.createElement('ul');
for(let i = 0; i < arr.length; i++) {
  let li = document.createElement('li');
  li.className = 'menu__item';
  li.innerHTML = arr[i];
  menu.append(li);
};
menu.className = 'menu';
document.body.prepend(menu);

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

js и элементы на странице

Всем приветПрошу помощи

270

javascript

Проверить наличие введённой запятой или точки в <input type="number">

Как определить тот факт, что в <input type="number"> уже введён символ запятой или точкиДля чего это нужно: в FireFox неприятная особенность, в подобный...

206

javascript