Load HTML Into DIV Without jQuery
Last Updated : Mar 11, 2024
IN - HTML jQuery | Written & Updated By - Riya
In this article we will show you the solution of load HTML into div without jQuery, there may be a need to duplicate the data when generating numerous web pages for just a site.
Using the same data, for instance, on a distinct website after the triggered event.
In such cases, the load() function benefits from reloading the div rather than the full page.
The load() method efficiently manages the data by loading it from a server and returning it to the desired location.
The load() method loads its content into a fetched element, while the on() method attaches one or even more event handlers with each of the elements.
The div can be accessed and reloaded using a combination of these techniques when an event triggers it.
The “div” can be reloaded without reloading the entire page using jQuery’s “on()” method in combination with the “load()” method.
The example codes make use of the following jQuery functions
- ready(): The ready event is triggered following the loading of a document object model (DOM).
- load(): The load() method fetches information from a server and inserts it into the chosen element.
- The ready() function will be used to check if our DOM is fully prepared before performing any additional actions. We'll bring up the outside HTML element.
Step By Step Guide On Load HTML Into DIV Without jQuery :-
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>div-1</title> </head> <body> <p>This content is from the first div.</p> </body> </html>
- We shall first produce your external HTML file.
- Where we wish to load external HTML, add a div element to the HTML file. Use the "src" attribute to include the jQuery library. Use the "on()" method to connect to the newly generated button.
- Check whether the DOM is ready within the script using the ready() function. The attached event "click" shows that this will activate the given function when the button is clicked.
- Choose the div element you wish to load HTML for next by using the load command (). By using its "id," the function definition's "load()" method can retrieve the included "element" and load it once more.
- As a result, when the button is clicked, the included div is reloaded once more, and the alert dialogue box's stated message is displayed.
Conclusion :-
As a result, we have successfully learned how to load html into div without jquery.
By using a combination of these techniques, you can access and reload the div when an event triggers it.
Through the combination of jQuery's "on()" method and "load()", you can reload the "div" without reloading the entire page.
I hope this article on load HTML into div without jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
