Is there a way in JavaScript to append a div and an image inside it?
Basically, I have images stored in an array. The displayAllImages function appends the images to the #images div. However, I want this function to append a new div, and within that div, there should be an image, either as a background or contained within a div. This process should repeat for all images so that each image is displayed in its own div. Please use only array implementation. Thank you!
Jsfiddle : http://jsfiddle.net/1qk3voxq/
var gallery= new Array();
gallery[0]="http://s6.tinypic.com/1zd1a47_th.jpg";
gallery[1]="http://s6.tinypic.com/2ngh9ty_th.jpg";
gallery[2]="http://s6.tinypic.com/29zy5qf_th.jpg";
var x= $("#images");
function displayAllImages() {
var i = 0,
len = gallery.length;
for (; i < gallery.length; i++) {
x.append("<img class='roll' src='" + gallery[i] + "'>");
}
};
$(function() {
displayAllImages();
});
#container {
width:600px;
height:600px;
background-color:#000;
}
.roll {
margin:4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div id=images></div>
</div>