Loading or Refreshing a div Content using JQuery

In this post, we will discuss how we can load or refresh some contents to our container div in a particular interval of time. To do this, we will be using normal setInterval in JQuery. We will create an element which is to be considered as our container div. And by using setInterval, we will refresh the content which we create dynamically to our container div. I hope you will like this.

Using the Code

To work with, load your jQuery reference first. I am using the following version of JQuery.

<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>

Create a container div

<div id='container'></div>

So now we can do our script part.

Implementation

Please find the below scripts:

$(document).ready(
function() {
setInterval(function() {
var randomnumber = Math.floor(Math.random() * 20);
    var html='';
    for(i=0;i<randomnumber;i++)
    {
        html+='<p>'+ randomnumber+ '</p>';
    }
    $('#container').html(html);
}, 1000);
});

As you can see, we are creating some random numbers which are less than 20.

var randomnumber = Math.floor(Math.random() * 20);

And assigning the random value to the dynamically created p tag.

html+='<p>'+ randomnumber+ '</p>'

Now, we need to style our p tag as follows:

p {
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 18px;
  width: 18px;
  padding: 5px;
  text-align: center;
  background-color: #999;
  color: #fff;
  float: left;
}

That is all, it is time to run our code.

jsfiddle link: Loading or refreshing a div content jsfiddle

Output

Conclusion

I hope you liked this post. Please share your valuable feedback. Thanks!