Creating HTML Elements using a Loop

Question

I'm currently trying to implement a function that randomly generates a random number of span tags using a loop. If I wrap the span tags in a string then the spans render onto my page as a string, however, if I don't wrap it in a string, it renders as an object.

Does anyone know of a way to handle this?

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;
}

use document.createElement for creating span elements developer.mozilla.org/en-US/docs/Web/API/Document/createElement — Karan Singh
– Karan Singh, Commented Jun 20, 2020 at 21:04

AJ_ · Accepted Answer · 2020-06-20 21:13:21Z

1

Use document.createElement() to create the span elements then append them to the 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">

answered Jun 20, 2020 at 21:13

AJ_

1,4851 gold badge10 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karan Singh · Accepted Answer · 2020-06-20 21:12:43Z

1

You can use Fragments for storing all the span elements;

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;
}

Once you get the fragments, just append wherever you want in the document.

 element.appendChild(fragment);

answered Jun 20, 2020 at 21:12

Karan Singh

3901 gold badge2 silver badges13 bronze badges

Comments

Dusart Victor · Accepted Answer · 2020-06-20 21:20:17Z

0

You can use something like:

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);
   }
}

This code will create a random number of span inside the "yourElement" element.

answered Jun 20, 2020 at 21:20

Dusart Victor

761 gold badge3 silver badges11 bronze badges

Comments

Tps · Accepted Answer · 2020-06-20 21:23:47Z

0

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
}

answered Jun 20, 2020 at 21:23

Tps

1945 bronze badges

Collectives™ on Stack Overflow

Creating HTML Elements using a Loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related