0

Как изменить код, чтобы я мог через 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>

2
  • Именно клонировать, или просто добавить сколько угодно блоков? А как же содержимое блоков? 21 июн 2022 в 7:50
  • Клонировать, чтобы с помощью JS я мог выбрать количество сколько мне нужно будет блоков, без добавления кнопки в коде. +содержимое в блоке смог менять (например текст) 21 июн 2022 в 7:52

2 ответа 2

0

Если вам надо было именно сам 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>

0

Не знаю, какая точно у вас задача, предложу такой вариант. Смысл такой, создается функция, и в нее передается массив. В зависимости от того, сколько написали элементов массива столько и будет блоков. Тем самым сможете управлять содержимым (текстом внутри блоков). А потом вставляем это в блок <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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.