Languages
[Edit]
EN

jQuery - html template with document ready function example

12 points
Created by:
nickkk0
647

Using jQuery library it is necessary to wait until the Document Object Model (DOM) becomes ready. This article shows how to create a simple HTML template for jQuery.

Note: read this article to know how to check if document is ready without jQuery.

1. ready method example

This example shows the most commonly used approach to assign ready event. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	// this is place for jQuery based source code...
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

Notes:

  • $(document) can be replaced with $('document'),
  • $(document).ready(...) can be used many times in sorce code executing some parts of code if it makes code more clear - check last example in this article.

2. Alternative ready event callback example

This example shows the second most commonly used approach to assign ready event. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(function() {
      	// this is place for jQuery based source code...
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

3. Multiple ready method calls example

This example shows how to catch ready event many times.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 1!');
    });

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 2!');
    });
   
  </script>
  <p>Some text here...</p>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 3!');
    });
   
  </script>
</body>
</html>

Alternative titles

  1. jQuery - document ready function example
  2. jQuery - document ready event example
  3. jQuery - document onready event example
  4. How to create HTML template using jQuery?
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

jQuery

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join