Include HTML Page In Another HTML Page Using jQuery
Last Updated : Mar 11, 2024
IN - HTML jQuery | Written & Updated By - Pragati
In this article we will show you the solution of include HTML page in another html page using jQuery, to load external HTML into a <div>, wrap your code inside the load() function.
Use jQuery's load() function for loading a page inside a div. Then, include the website you want to include.
The example codes make use of the following jQuery functions.
- ready(): This function is used to trigger the ready event after the "document object model" (DOM) is loaded.
- load(): The load() method fetches information from a server and inserts it into the chosen element.
It should be noted that before performing any more actions, we will call to ready() function to make sure our DOM is fully prepared. We'll use the load() function to load the external HTML.
We can load the information from the server using the jQuery load() method.
The chosen container will display the data. The load() method can be used to incorporate another HTML file into the one that is currently open.
The jQuery CDN must be used in the HTML script element in order to run jQuery.
For instance, on the most recent version of jQuery, visit CDN and select the minified option.
Copy the code after that, then paste it into your index.html file. Then, in HTML, build a div with the id another Content.
Then make a p tag and enter the text there. From the index.html file. Make a new HTML file called lake.html and add a paragraph to it. From lake.html, this.
Create a jQuery function and place it in index.html. Use the load() method using lake.html as the argument, choosing the id of another Content.
Step By Step Guide On Include HTML Page In Another HTML Page Using jQuery :-
<!Doctype Html> <Html> <Head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <Title> Add the jQuery file into Html by including CDN </Title> </Head> <Body> Hello User!... <br> <center> <img src="https://www.talkerscode.com/images/logo/tc_logo.png" width="100" height="100" > </center> </Body> </Html>
- jQuery's official website is listed below, where we must first download the js file.
- After downloading the file, we must open the HTML file where we wish to insert the JQuery code.
- Next, we must position the cursor right before the title tag, between the head tag. In order to add the jQuery file, we must utilize the script> tag, which specifies the src property.
- The jQuery file has now been successfully included in our HTML page when we save the Html file.
Conclusion :-
As a result, we have successfully learned how to include html page in another html page using jquery.
The URL to load is the first parameter for the load() function. The other two options, data or the callback function, are both optional.
The information to be transmitted to a server while handling the request is known as the parameter data.
If the load() method is successful, a callback function will be called.
I hope this article on include HTML page in another html page using jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
