Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

James Clifton
James Clifton
1,420 Points
Posted by James Clifton
James Clifton
1,420 Points

How do I repeat more HTML using Javascript?

Hey this is my first question on the Treehouse community so i'm hoping you guys can help!

I am doing a personal project and I am creating a table which has multiple rows. I'm using Flexbox to do this (mainly due to how i want the table to react on responsive.

I don't want to have to bulk out my HTML by repeating the code for each row, i'd rather use Javascript to repeat the code. I have found examples and solutions online for something as simple as <div>col-1</div> and repeating that simple bit of code with a count of +1, but my need is a bit more complex?

The current html I have for the section is this:

<div id="row-1" class="light-row"> <div class="date row-item first-row-item">xx/xx/xx</div> <div class="title row-item">Article title goes here</div> <div class="author row-item"> <div class="avatar"></div> <div class="author-name">Author Name</div> </div> <div class="description row-item last-row-item">Description goes here</div> </div>

(sorry for the lack of indentation in the message, doesn't seem to let me do it?)

I essentially want to repeat this code and incrementing the div id by +1. Is this possible?

Thanks in advance!

1 Answer

deebird
deebird
7,558 Points

You can do the following with jquery

for (let i=0; i<10; i++){
let html = `<div id='row-${i}' class='light-row'> <div class='date row-item first-row-item'>xx/xx/xx</div> <div class='title row-item'>Article title goes here</div> <div class='author row-item'> <div class='avatar'></div> <div class='author-name'>Author Name</div> </div> <div class='description row-item last-row-item'>Description goes here</div> </div>`;
$('.container').append(html);
}