Как разбить список ul li на 3 списка ul li?

Чтобы разбить список <ul> с элементами <li> на 3 отдельных списка, вам понадобится использовать JavaScript для манипуляции с DOM.

1. Сначала необходимо получить ссылку на список <ul> и все его дочерние элементы <li>. Вы можете сделать это, используя методы querySelector и querySelectorAll. Например:

const ulList = document.querySelector('ul');
const liItems = ulList.querySelectorAll('li');

2. Затем вам нужно создать 3 новых элемента <ul> для каждого из трех списков. Вы можете использовать метод createElement для этого:

const ulList1 = document.createElement('ul');
const ulList2 = document.createElement('ul');
const ulList3 = document.createElement('ul');

3. Далее необходимо перебрать все элементы <li> и перемещать каждый элемент в один из трех новых списков. Вы можете использовать метод appendChild, чтобы добавить элемент в конец списка. Чтобы определить, в какой список добавить элемент, можно использовать оператор % для определения остатка от деления индекса элемента на 3. Например:

for (let i = 0; i < liItems.length; i++) {
  const liItem = liItems[i];
  
  if (i % 3 === 0) {
    ulList1.appendChild(liItem);
  } else if (i % 3 === 1) {
    ulList2.appendChild(liItem);
  } else {
    ulList3.appendChild(liItem);
  }
}

4. Наконец, вы можете добавить новые списки в DOM, например, вставить их перед или после исходного списка. Для этого вы можете использовать метод insertBefore или insertAdjacentElement. Например:

ulList.parentNode.insertBefore(ulList1, ulList);
ulList.parentNode.insertBefore(ulList2, ulList);
ulList.parentNode.insertBefore(ulList3, ulList);

Теперь исходный список <ul> будет разделен на 3 отдельных списка <ul>, каждый из которых будет содержать треть элементов из исходного списка.