I am looking to dynamically create 1 div container every x seconds, and repeat this process n times.
To achieve this, I have started with the following code:
$(document).ready(function() {
for (var i = 0; i < 5; i++) {
createEle(i);
}
});
function createEle(value) {
var d = $("<div></div>");
d.addClass("d");
d.html(value);
$("#container").append(d);
}.d {
height: 20px;
color: white;
background: red;
margin-bottom: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>The current implementation is functional, but I would like to incorporate a time interval feature.
$(document).ready(function() {
for (var i = 0; i < 5; i++) {
setTimeout(function() {
createEle(i);
}, i * 1000);
}
});
function createEle(value) {
var d = $("<div></div>");
d.addClass("d");
d.html(value);
$("#container").append(d);
}.d {
height: 20px;
color: white;
background: red;
margin-bottom: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>In the second example provided, I encountered an issue where the wrong index value was being passed. How can I rectify this?