CODEWITHSUNDEEP
javascriptimagedom
Lostinspirit3000
Lostinspirit3000

Reputation: 51

create multiple img tags in a div through the DOM

I am not knowing on how exactly how to proceed after I have created my div and assigned it an id. I can't use JQuery or another library of JavaScript.

So far I have

var imageTabsDiv = document.createElement('div');
    imageTabsDiv.setAttribute('id', 'imageTabs');

but then I hit a mental block and don't know how to proceed after this.

It should look like this in the html

<div id="imageTabs">
   <img src="images/pics/imageTab01" />
   <img src="images/pics/imageTab02" />
   <img src="images/pics/imageTab03" />
   <img src="images/pics/imageTab04" />
</div>

I would like some advice or hint on how to proceed from here accessing the div tag threw the DOM.

Upvotes: 2

Views: 3263

Answers (1)

tymeJV
tymeJV

Reputation: 104775

A quick for loop to create your img elements and assign the proper source, then append to the div

for (var i = 1; i < 5; i++) {
    var img = document.createElement("img");
    img.src = "images/pics/imageTab0" + i;
    imageTabsDiv.appendChild(img);
}

And of course, append that newly created div somewhere.

Upvotes: 5

Related Questions