Как создать несколько одинаковых элементов?

Question

[DeniSidorenko]

Есть такой код:

var count = example.array.length; // Выводит 5 элементов

Есть html wrapper:

<div class='dots-wrapper'></div>

Мне надо, чтобы в зависимости от длины массива в dots-wrapper создавались div.dots.

К примеру, мы получили количество в 5.
Тогда js генерирует такую структуру:

<div class='dots-wrapper'>
  <div class='dot'></div>
  <div class='dot'></div>
  <div class='dot'></div>
  <div class='dot'></div>
  <div class='dot'></div>
</div>

Проще говоря: количество dot'ов = количество элементов массива.

Answer 1

[0xD34F]

Куда, что и в каком количестве надо добавить:

const container = document.querySelector('.dots-wrapper');
const tag = 'div';
const className = 'dot';
const count = 10;

Можно пойти двумя путями:

• Первый - собирание разметки. Для одного элемента она будет выглядеть так:
  
  

  const elementHTML = `<${tag} class="${className}"></${tag}>`;

  
  Чтобы её размножить, есть варианты:
  
  

  const elementsHTML = Array(count).fill(elementHTML).join('');
  // или
  const elementsHTML = Array(count + 1).join(elementHTML);
  // или
  const elementsHTML = elementHTML.repeat(count);

  
  Добавляем:
  
  

  container.innerHTML = elementsHTML;
  // или
  container.insertAdjacentHTML('beforeend', elementsHTML);

  
  
• Второй - создание элементов напрямую. Тут тоже есть разные варианты:
  
  

  for (let i = 0; i < count; i++) {
    const element = document.createElement(tag);
    element.classList.value = className;
    container.insertAdjacentElement('beforeend', element);
  }

  
  или
  
  

  while (container.children.length < count) {
    const element = document.createElement(tag);
    element.classList.add(className);
    container.appendChild(element);
  }

  
  или
  
  

  const element = document.createElement(tag);
  element.className = className;
  container.append(...Array.from({ length: count }, () => element.cloneNode()));

  
  

Answer 2

[Егор Живагин]

for (var i = 0; i < example.array.length; i++ ) {
// код создания элемента
}