Как клонировать несколько блоков HTML на чистом JS?

Question

Как изменить код, чтобы я мог через js вводить количество столбцов а не просто один раз клонировать. Мне например нужно чтобы у меня было таких div 5-10 клонов.

const myList = document.getElementById('div');
const listChildren = myList;
const bananasItem = listChildren;
const bananasCopy = bananasItem.cloneNode(true);
myList.appendChild(bananasCopy);

.div {
  width: 350px;
  height: 350px;
  background-color: black;
}

li {
  color: white;
  font-size: 80px;
}

<div class="div" id="div">
  <li>Home</li>
  <li>About</li>
</div>

Answer 1

Не знаю, какая точно у вас задача, предложу такой вариант. Смысл такой, создается функция, и в нее передается массив. В зависимости от того, сколько написали элементов массива столько и будет блоков. Тем самым сможете управлять содержимым (текстом внутри блоков). А потом вставляем это в блок <div id="div">item</div>

function itemBlock(list) {
  let out = document.querySelector('#out')
  let item = ''
  for (let i = 0; i < list.length; i++) {
    item +=
      `
            <div>${list[i]}</div>
        `
  }
  div.insertAdjacentHTML('beforeend', item);
}
itemBlock(['Один', 'Два', 'Три'])

<div id="div">item</div>

Answer 2

Если вам надо было именно сам div скопировать несколько раз:

const myList = document.getElementById('div');

const count = 8;

for (let i = 0; i < count; ++i) {
  const myListCopy = myList.cloneNode(true);
  myList.parentNode.append(myListCopy);
}

.div {
  width: 100px;
  height: 100px;
  background-color: black;
}

li {
  color: white;
  font-size: 20px;
}

<div class="div" id="div">
  <li>Home</li>
  <li>About</li>
</div>

БЛОГ НА HUSL

Как клонировать несколько блоков HTML на чистом JS?

Ответы (2 шт):