Создание HTML элементов с помощью цикла

Question

Сейчас я пытаюсь реализовать функцию, которая случайным образом генерирует случайное количество тегов span, используя al oop. Если я заключу теги span в строку, тогда промежутки будут отображаться на моей странице в виде строки, однако, если я не заключу их в строку, они будут отображаться как объект.

Кто-нибудь знает о как с этим справиться?

function generateRandomStarCount (){
  Math.round(Math.random()*5)
  let result = '';
  for (var i = 0; i < Math.round(Math.random()*5); i++){
    result += '<span className="fa fa-star checked"></span>'
  } 
  return result;
}

Answer 1

Используйте document.createElement() для создания элементов диапазона, а затем добавьте их в DOM.

function generateRandomStarCount () {
  let result = [];
  
  for (var i = 0; i < Math.round(Math.random()*5); i++){
    let span = document.createElement('span')
    span.className = 'fa fa-star checked'
    result.push(span)
  } 

  return result;
}

let stars = generateRandomStarCount()
stars.forEach(star => document.body.appendChild(star))

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Answer 2

Вы можете использовать фрагменты для хранения всех элементов диапазона;

function generateRandomStarCount (){
  const fragment = new DocumentFragment();
  for (var i = 0; i < Math.round(Math.random()*5); i++){
      const span = document.createElement('span');
      span.classList.add('fa fa-star checked');
      fragment.appendChild(span)
  } 
  return fragment;
}

Как только вы получите фрагменты, просто добавьте их в любое место документа.

 element.appendChild(fragment);

Answer 3

function generateRandomStarCount () {
  const randomNumber = Math.round(Math.random() * 5)
  const container = document.createElement('div')

  for (var i = 0; i < randomNumber; i++) {
    const spanEl = document.createElement('span')
    spanEl.className = 'span-item'
    spanEl.innerHTML = `Count: ${i}`
    container.append(spanEl)
  }
  return container
}

Answer 4

Вы можете использовать что-то вроде:

function generateRandomStarCount() {
   element = document.getElementById('yourElement');
   for (let i = 0; i < Math.round(Math.random()*5); i++){
     var newSpan = document.createElement("span");
     newSpan.className = "fa fa-star checked";
     element.appendChild(newSpan);
   }
}

Этот код создаст случайное число диапазона внутри элемента yourElement.