Using the code

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

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

Create a container div

[html]
<div id=’container’></div>
[/html]

So now we can do our script part.

Implementation

Please find the below scripts.

[js]
$(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);
});

[/js]

As you can see, we are creating some random numbers which is less than 20.
[js]
var randomnumber = Math.floor(Math.random() * 20);
[/js]

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

[html]
html+='<p>’+ randomnumber+ ‘</p>’
[/html]

Now we need to style our p tag as follows.

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

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 article. Please share me your valuable feedback. Thanks in advance.

Kindest Regards
Sibeesh Venu