What is the Equivalent of $(document).ready in JavaScript ?

Last Updated : 18 Sep, 2024

The equivalent of $(document).ready in JavaScript is the DOMContentLoaded event. It ensures the code runs after the HTML is fully loaded and parsed before images and other resources. This is essential for executing scripts that manipulate the DOM without waiting for all assets to load.

When using jQuery is out of option and we want to get the same result without using jQuery, then we can use two approaches:

Table of Content

Using the "DOMContentLoaded" event
Deferred loading

Approach 1: Using the "DOMContentLoaded" event

In this approach, the DOMContentLoaded event is used, which can be attached to either the document or the window. This event fires once the basic HTML content has been loaded and parsed, without waiting for stylesheets, images, or subframes to fully load. This provides similar functionality to jQuery's $(document).ready().

Syntax:

document.addEventListener("DOMContentLoaded", function() {
    // Code to be executed when the DOM is ready
}); 
// Or we can also use this event in this way
window.addEventListener("DOMContentLoaded", function() {   
    // Code to be executed when the DOM is ready   
});

Example: In this example we are using the the "DOMContentLoaded" event, updating the h1 element text to "DOM is ready!" once the DOM has fully loaded, mimicking jQuery's $(document).ready() functionality.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Using the "DOMContentLoaded" event
    </title>
    <script>
        //When the DOMContentLoaded event is not 
        // used, the script is like this
        // This will not be executed
        document
            .addEventListener("DOMContentLoaded",
                function () {

                    // Code to be executed when the DOM is ready
                    let heading = document
                        .getElementById("myHeading");
                    heading.textContent = "DOM is ready!";
                });
    </script>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        $(document).ready equivalent without jQuery
    </h3>

    <h1 id="myHeading">
        Waiting for DOM...
    </h1>
</body>

</html>

Output:

Approach 2: Deferred loading

In this method, the JavaScript code is placed inside a <script> tag positioned immediately before the closing </body> tag at the end of the HTML document. This ensures that the script runs after all the HTML content has been loaded and parsed, giving the code access to all DOM elements without explicitly using the DOMContentLoaded event.

Example: In this example we demonstrates deferred loading by manipulating text content after the DOM has loaded, achieving a result equivalent to jQuery's $(document).ready() using plain JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Deferred loading
    </title>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        $(document).ready
        equivalent without jQuery
    </h3>

    <strong style="color: sienna; 
                   margin: 2rem;" id="myText">
        DOM not loaded yet...
    </strong>
    <br>

    <strong style="color: sienna; 
                   margin-left: 2rem;" id="myText2">
    </strong>

    <script>
        let text = document
            .getElementById("myText");
        let text2 = document
            .getElementById("myText2");
        text.textContent =
            "In this code same result is achieved using";
        text2.textContent =
            "Using the second aprroach!";
    </script>
</body>

</html>
<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        $(document).ready
        equivalent without jQuery
    </h3>

    <strong style="color: sienna; 
                   margin: 2rem;" id="myText">
        DOM not loaded yet...
    </strong>
    <br>

    <strong style="color: sienna; 
                   margin-left: 2rem;" id="myText2">
    </strong>

    <script>
        let text = document
            .getElementById("myText");
        let text2 = document
            .getElementById("myText2");
        text.textContent =
            "In this code same result is achieved using";
        text2.textContent =
            "Using the second aprroach!";
    </script>
</body>

</html>

Output:

What is the yield Keyword in JavaScript?

priyanshuchatterjee01

Improve

Article Tags :

What is the Equivalent of $(document).ready in JavaScript ?

Approach 1: Using the "DOMContentLoaded" event

Syntax:

Approach 2: Deferred loading

Similar Reads

Thank You!

What kind of Experience do you want to share?