The **HTML Document Object Model** (DOM) is the interface in which one can add, delete, or edit objects in an HTML file. When you open an HTML file, the DOM must be *loaded* to ensure the file is working correctly. 

Once your DOM is loaded, i.e. the entire tree of data has been created then you can start adding external elements into the HTML file. 

The `ready` method allows you to wait for the DOM to be loaded before you add other elements to your HTML file. 

# How to use the `ready` method

The `ready` method is called on the `document` in the following way:

> **Note:** Post jQuery 3.0, this way of calling the ready function is not advisable. Rather you simply call the function as `$(function)` as the ready method is only called on the current document.

# `Ready` method value

Using this method allows time for your DOM to be loaded completely, and then it adds all other elements. 

Also, this is a space where you can fire all other events that you need. Within the `ready` method you can call any events which will be executed in chronological order.

<html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script>
     $.holdReady(true);
 </script>
 <script>
    function addDelay() {
    setTimeout(function(){ $.holdReady(false); }, 2000);
    }
    
</script>
 <script>
   $(document).ready(function(){
   	$("p").text("DOM is loaded!");
   });
 </script>
 </head>
 <body>
   <p>DOM is loading</p>
   <button onclick="addDelay()">Click to load DOM</button>
 </body>
</html>

codemirror

> **Note:** Post jQuery 3.0, this way of calling the ready function is not advisable. Rather you simply call the function as `＄(function)` as the ready method is only called on the current document.

# `Ready` method value

Using this method allows time for your DOM to be loaded completely, and then it adds all other elements. 

Also, this is a space where you can fire all other events that you need. Within the `ready` method you can call any events which will be executed in chronological order.

What is document.ready in jQuery?

Wait for the DOM to load using the ready method before adding elements in jQuery.

What is document.ready in jQuery?

How to use the ready method

Ready method value

Example

How to use the `ready` method

`Ready` method value