Languages
[Edit]
EN

jQuery - html template with document ready function example

12 points
Created by:
Kate_C
2854

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?

Checkout latest findings & news:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Rockstar community members
Thank you for great work ūüĎć