How to check if the DOM is ready?

The JavaScript file is executed when it is downloaded, and at this moment it blocked by the DOM rendering process . So, if you don't wrap your JavaScript code inside "$(document).ready", your code might get executed with an incomplete DOM tree. The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. DOM elements in the sense all HTML Elements in your Document like div,input types etc except iframe. There are two points you can have the code executed with a complete DOM tree: "load" and "DOMContentLoaded". The later is fired much earlier than the latter. Document.ready function fires as soon as the DOM is loaded and ready to be manipulated by script. This function is the earliest point in the page load process where script can safely access element in the page's HTML DOM . It is always a great idea to wrap your Javascript code inside jQuery.ready() . You can use the explicit call.
$(document).ready(function(){ // do this after dom is ready });

Or use the shortcut

$(function(){ // do this after dom is ready });