How can i use a for loop in javascript to add HTML

Question

I'm making a little gallery in my website and it contains lots of pictures, how can I use a for loop to add the li in my website.

This is my HTML right now and instead of all those <li> I would like a for loop. HTML:

<div id="pictureBlock">
    <div id="three-columns" class="grid-container">
        <ul class="rig columns-3">
            <li><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
            <li><img src="images/7.jpg" /></li>
            <li><img src="images/8.jpg" /></li>
            <li><img src="images/9.jpg" /></li>
            <li><img src="images/10.jpg" /></li>
            <li><img src="images/11.jpg" /></li>
            <li><img src="images/12.jpg" /></li>
            <li><img src="images/13.jpg" /></li>
            <li><img src="images/14.jpg" /></li>
            <li><img src="images/15.jpg" /></li>
        </ul>
    </div>
</div>

are you getting array of images and want to display them in lis? — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Apr 14, 2015 at 7:53
Do you want display all these images using JavaScript. Images do you want to print are hard coded or some back end is provided for displaying images. — Codelord
– Codelord, Commented Apr 14, 2015 at 7:53

Hamid Mohayeji · Accepted Answer · 2015-04-14 07:54:20Z

7

Using jQuery:

var ul = $('ul.rig');
var count = 15; // number of images

for(var i = 1; i <= count; i++) {
    ul.append('<li><img src="images/' + i + '.jpg"></li>');
}

answered Apr 14, 2015 at 7:54

Hamid Mohayeji

4,2953 gold badges52 silver badges60 bronze badges

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

1 Comment

cavalcantelucas Over a year ago

what's that first line for ?

theshemul · Accepted Answer · 2015-04-14 08:02:06Z

2

<div id="pictureBlock">
    <div id="three-columns" class="grid-container">
        <ul class="rig columns-3" id="gallery">
        
        </ul>
    </div>
</div>

<script>
    var gal = document.getElementById('gallery');
    

    for (var i = 1; i < 15 ; i++) {
        gal.innerHTML += "<li><img src='images/" + i + ".jpg' /></li>";
    };

</script>

answered Apr 14, 2015 at 8:02

theshemul

4181 gold badge7 silver badges16 bronze badges

Comments

Timur Osadchiy · Accepted Answer · 2015-04-14 07:54:30Z

1

I believe the easiest way would be using jQuery:

var numberOfImages = 15;
var $container = $("#pictureBlock ul");
for (var i=1; i<=numberOfImages; i++) {
  $container.append('<li><img src="images/'+i+'.jpg" /></li>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pictureBlock">
    <div id="three-columns" class="grid-container">
        <ul class="rig columns-3"></ul>
    </div>
</div>

answered Apr 14, 2015 at 7:54

Timur Osadchiy

6,2994 gold badges28 silver badges29 bronze badges

Comments

Qarib Haider · Accepted Answer · 2015-04-14 08:02:51Z

1

01 - If your image file name are ordered by number and are in same location

// Define number of images
var numImages = 15;

// Get the div you want to add element to
var rigDiv = $(".rig");

// Loop through images and add them to target div
for (var i=1; i <= numImages; i++) {
    var element = '<li><img src="images/' + i + '.jpg" /></li>';
    rigDiv.append(element);
}

02 - If your image file name are not in order and are not in same directory

// Define images array
var images = [
  'images/1.jpg',
  'images/2.jpg',
  ....
  'images/10.jpg'
];

// Get the div you want to add element to
var rigDiv = $(".rig");

// Loop through images and add them to target div
for(var image of images){
    var element = '<li><img src="' + image + '" /></li>';
    rigDiv.append(element);
}

edited Apr 14, 2015 at 8:02

answered Apr 14, 2015 at 7:55

Qarib Haider

4,9265 gold badges30 silver badges38 bronze badges

Comments

Pranav C Balan · Accepted Answer · 2015-04-14 08:37:42Z

1

Simply you can use a for loop,

for (var i = 1; i < 16; i++) {
  $('ul.rig').append('<li><img src="images/' + i + '.jpg" /></li>')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="pictureBlock">
  <div id="three-columns" class="grid-container">
    <ul class="rig columns-3">
    </ul>
  </div>
</div>

edited Apr 14, 2015 at 8:37

answered Apr 14, 2015 at 7:55

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Comments

Peter · Accepted Answer · 2015-04-14 07:59:12Z

0

Using jQuery you could do something like in this Fiddle i just created:

var pictures = [ "1", "2" ];

$.each(pictures, function(value) {
    $(".rig").append("<li><img src='images/" + value + ".jpg' /></li>");
});

http://jsfiddle.net/wd09ccpa/

In the var pictures would have to be some list of the pictures you have.

answered Apr 14, 2015 at 7:59

Peter

9331 gold badge12 silver badges25 bronze badges

Comments

cssGEEK · Accepted Answer · 2015-04-14 08:00:16Z

0

Jquery for the win:

for(var i = 1; i <= count; i++) {
   $('ul.rig').append("<li><img src='images/'+i+'.jpg'></li>");
}

answered Apr 14, 2015 at 8:00

cssGEEK

1,0142 gold badges17 silver badges38 bronze badges

Comments

Tamandeep Singh · Accepted Answer · 2018-07-24 07:30:37Z

0

var count = 15;
for(let i=1; i<=count; i++){
    $("ul").append('<li><img src="images/'+ i +'.jpg" /></li>');
}

edited Jul 24, 2018 at 7:30

answered Jul 24, 2018 at 5:53

Tamandeep Singh

671 silver badge5 bronze badges

Collectives™ on Stack Overflow

How can i use a for loop in javascript to add HTML

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related