How to dynamically generate <div> in JavaScript

Question

I have a function to dynamically create a card, which takes in an array y.

createCards = (y) => {
    const matchElement = document.createElement('div');
    matchElement.classList.add('match-title'); 
    
   
        const matchInnerHTML = `    
        <div class="info>        
            <span class="number">${y[0]}</span>
        </div>
        `    
   ;
}

The above code works as expected. However, I want the div elements to be created dynamically as the value of i changes.

I tried to use a for loop the following way to update value of i

createCards = (y) => {
    const matchElement = document.createElement('div');
    matchElement.classList.add('match-title'); 

for(let i=0; i<=y.length; i++){
    const matchInnerHTML = `    
    <div class="info>        
        <span class="number">${y[i]}</span>
    </div>
    `    


 ;

matchElement.innerHTML = matchInnerHTML;
match_container.appendChild(matchElement);

}
    }

I'm getting undefined on my browser window. I want the cards to be generated dynamically as array gets updated. How to get around this?

vanowm · Accepted Answer · 2021-07-15 02:30:51Z

2

There are two issues:

you are creating only one div and than replacing it's innerHTML with data from the y. If you need multiple divs, than you need move everyting inside the for loop.
your for loop has an extra step, because i cannot be equal to y.length, it can only be smaller. That's why you get the undefined since y[y.length] is always undefined, because of first issue it only show the last item undefined

const match_container = document.body;
createCards = (y) => {
  for (let i = 0; i < y.length; i++) {
    const matchElement = document.createElement('div');
    matchElement.classList.add('match-title');
    const matchInnerHTML = `    
    <div class="info>        
        <span class="number">test${y[i]}</span>
    </div>
    `
    matchElement.innerHTML = matchInnerHTML;
    match_container.appendChild(matchElement);
  }
}

createCards([1, 4, 6, 7]);

<div id="test"></div>
<div>blah</div>

edited Jul 15, 2021 at 2:30

answered Jul 15, 2021 at 2:24

vanowm

10.4k2 gold badges29 silver badges50 bronze badges

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

Comments

async await · Accepted Answer · 2021-07-15 02:23:49Z

I am having a little trouble understanding your question, but hopefully this helps you accomplish your task.

const anArr = [0,1,2,3,4,5];

const createCards = y => {
  const match_container = document.querySelector("#mc");
  const matchElement = document.createElement('div');
  matchElement.classList.add('match-title'); 

  for(let i=0; i<y.length; i++){
    const infoDiv = document.createElement("div");
    infoDiv.classList.add("info");
    
    const numberSpan = document.createElement("span");
    numberSpan.classList.add("number");
    numberSpan.innerText = y[i];
    
    matchElement.appendChild(infoDiv);
    infoDiv.appendChild(numberSpan);
    match_container.appendChild(matchElement);
  }
}

createCards(anArr);

<div id="mc"></div>

Rupak · Accepted Answer · 2021-07-15 02:31:16Z

0

why don't you create a function that create div for each iteration in your for loop

const createCards = () => {
    const matchElement = document.createElement('div');
    matchElement.classList.add('match-title'); 
}

for(let i=0; i<=array.length; i++){
    createCards()
}

answered Jul 15, 2021 at 2:31

Rupak

5398 silver badges20 bronze badges

Comments

Mingze Li · Accepted Answer · 2021-07-15 02:37:19Z

0

My understanding about your question is that there is a array y with several values, you want to create a list of div and each div has a span element to contain a value from y. In this case, you can direct insert the value of y[i] inside the const matchInnerHTML. This is also the method for my similar project.

const matchInnerHTML = '<div class="info"><span class="number">' + y[i] + '</span></div>';

answered Jul 15, 2021 at 2:37

Mingze Li

3902 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to dynamically generate <div> in JavaScript

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