All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

Load HTML Into DIV Without jQuery

Last Updated : Mar 11, 2024

Load HTML Into DIV Without jQuery

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">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <p>This content is from the first div.</p>
  1. We shall first produce your external HTML file.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪