Languages
[Edit]
EN

jQuery - html template with document ready function example

12 points
Created by:
Kate_C
19790

Using jQuery library it is necessary to wait until the Document Object Model (DOM) becomes ready. This article shows how to create 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 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 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>

Merged questions

  1. How to create HTML template using jQuery?
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join