What is need of document.ready() in JQuery?

Here to illustrate the need of document.ready().
we will write jQuery code without document.ready() before the textbox code and let's run.
so we will get output but textbox is empty.

Output of above code:

Why we get empty textbox?
DOm means Document Object Model
It is in-memory representation of your HTML.It is loaded by browser in interpreted manner. Interpreted manner means line by line execution from top to bottom.so in our case script is getting executed before the textbox element code. so textbox is not loaded into memory while executing script that's why we are getting empty textbox.

Then what is the solution for above problem??

answer is use document.ready()

document.ready() means when the final line of HTML is read then DOM is loaded after that fired this action.

Following example shows need of document.ready():

Output of above code: