jQuery / JS - add div to div per x seconds

Question

I have a problem. I don’t know enough javascript. I can say that I know nothing. I need one script which add ‘div’ to ‘p’ per 1-5 seconds. I tried but i did too much mistakes. :/

What I want add (per some seconds), it's as one:

<img src="/Flags/{Random flag/number (1-100)}</.png" alt=""> user stole
<i>{Random number (1000, 2000, 3000) from array)}</i> <img src="strawberry.png" class="nob img-rounded ">  
<i>{Random number (1000, 2000, 3000) from array)}</</i> <img src="orange.png" class="nob img-rounded ">  
<i>{Random number (1000, 2000, 3000) from array)}</</i> <img src="apple.png" class="nob img-rounded "> 
<i>{Random number (1000, 2000, 3000) from array)}</</i> <img src="banana.png" class="nob img-rounded ">  
<i>{Random number (1000, 2000, 3000) from array)}</</i> <img src="sandwich.png" class="nob img-rounded ">

Where I want add this:

<p class="activity-border">
    {HERE}
</p>

What visitors must see:

{Random flag} user stole {Random number} Strawberry(picture), {Random number} Orange(picture), {Random number} Apple(picture),{ Random number} Banana(picture), {Random number} sandwich(picture).

Please explore setInterval. For your reference - http://www.w3schools.com/jsref/met_win_setinterval.asp — Nikhil Aggarwal, Jun 26 '15 at 10:54

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

Well if you want to do something with time interval just use js "setinterval" function, like this :

<script>
    //...
    setInterval(function() {
        //Do your stuff here;
    }, TIME_IN_MS);
    //...
</script>

So, in your case you should do something like :

//in "do your stuff part"
document.getElementById('your_p_id').appendChild(your_new_node);
//or with jquery
$('#your_p_id').append('your_div');

Hope it helps

maybe you should also have a look at this : setTimeout or setInterval?

Fiddle : http://jsfiddle.net/ddtyovwv/4/

edited May 23 '17 at 11:58

Community

1
1

answered Jun 26 '15 at 10:59

Julo0sS

2,096
5
28
52

I used it before and i don't know where i did mistake that it didnt works but it works now. Thanks. – Daniel Jun 26 '15 at 11:07

score 0 · Answer 2 · answered Jun 26 '15 at 11:00

http://www.w3schools.com/jsref/met_win_settimeout.asp

var value = null;
var loop = true;
while(loop) {
  //evaluate your value
  value = fooBarfoo();
  setTimeout(function(){ addDiv("#divId", value); }, 3000);
  if(finishing_expression) loop = false;
}

function addDiv(divId) {
  $('#'+divId).append("<div>"+value+"</div>); }

this loop adds a div with "value" as innerHTML every 3000ms. You just need to fill your "value" with your suitable data

html:

<div id="divId"></div>

jQuery / JS - add div to div per x seconds

2 Answers2