how to refresh a div using javascript without refreshing page?

Today, We want to share with you how to refresh a div using javascript without refreshing page.In this post we will show you auto refresh div using javascript, hear for Refresh DIV Contents without Reloading the Entire Page using jQuery we will give you demo and example for implement.In this post, we will learn about
Refresh a HTML div without page load AJAX
with an example.

How to reload a div without reloading the entire page?

jQuery.load() is probably the simply way to load data asynchronously using a data selector, but you can also use any of the jquery ajax some methods (get method, post method, getJSON method, ajax, etc.)

$("#mydiv").load(location.href + " #mydiv");

Refresh a DIV Without Reloading the Page

Example 1: index.html

<!DOCTYPE html>
    <title>Refresh a DIV Without Reloading the Page -</title>
    <script src=""></script>
    <p>Will refresh content in 5 seconds</p>
    <div id="products" style="margin:5px 0;"></div>

    $(document).ready(function () {

    var i = 1;
    function live_products_status() {

            type: 'GET',
            url: '../../shop/shops.xml',
            dataType: 'xml',
            success: function (xml) {

                $(xml).find('List').each(function () {

                    if ($(this).find('code').text() == i) {
                        '<div>' +
                            '<div><b>Name of Product: </b>' +
                                $(this).find('ProductName').text() + '</div> ' +
                            '<div><b>ProductType: </b>' +
                                $(this).find('ProductType').text() + '</div> ' +
                            '<div><b>Pcode: </b>' +
                                $(this).find('Pcode').text() + '</div> ' +

                i = i + 1;
                if (i >= 3) i = 1;

    var reloadXML = setInterval(live_products_status, 5000);


here simple we will Copy the data and save it in file and name it shops.xml.

<?xml version="1.0"?>
<!-- Last edited by Dhara Bhuva @ -->
    <ProductName>Angularjs Master</ProductName>
    <ProductName>Advanced Laravel Materials</ProductName>
    <ProductType>Server Side</ProductType>
    <ProductName>Vuejs 4 Blue Product</ProductName>

I hope you get an idea about refresh table content without reloading page using javascript.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  Laravel 6 CRUD Tutorial With Example from scratch

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Add Edit Delete Table Row Example using JQuery
  2. Read Also:  jQuery Dynamic Tabs Add Active class
  3. Read Also:  PHP JQuery Ajax Request POST Data
  4. Read Also:  jQuery AJAX laravel 6 Delete Data from database
  5. Read Also:  Codeigniter Form Validation with Google reCAPTCHA
  6. Read Also:  FontSpace Web Application Icons
  7. Read Also:  Laravel AJAX Live Search Example
  8. Read Also:  Refresh a HTML div without page load AJAX
  9. Read Also:  Remove HTML Table Row and Column using jQuery
  10. Read Also:  PHP Jquery Ajax CRUD Example Tutorial From Scratch