Load HTML file in div element using jQuery

In this tutorial, I am going to show you how to load an HTML file in a div element with jQuery. Well, it is very easy to do that using the HTML iframe tag. But, this time we are going to do that with JavaScript code using jQuery.

At the very first, let’s write our HTML code:

<div id="load"></div>

Very simple and easy. Isn’t it? We give our div element an ID “load” which we will use in our jQuery JavaScript code soon. Inside our div element with ID “load”, we are going to load our HTML content.

Now we are going to write our jQuery code. Before we are going to write our jQuery code, be sure that you have loaded the jQuery file.

Below is our jQuery code to load HTML file content in our div element:

$(document).ready( function() {
      $("#load").load("test.html");
});

In our above code, we have used the jQuery load() method. With this jQuery method, we load our HTML file content. We have passed the ID “load” to this method to load the HTML in the particular element.

Also, read:

 

Before we run it on on our server and open it on the browser, be sure about that you have created the “test.html” file. So first, create the HTML file and put the proper path of it. Add some content in your HTML file so that you can understand when the file loaded.

If everything is right, we will see the HTML file content loaded in our div element.

Leave a Reply

Your email address will not be published. Required fields are marked *