Welcome to this quick discussion. Today we are going to discuss the basic concepts of jquery. Have you tried to use the getElementById without window load or document ready events? Do you know why does it not work without these events? Every time we use the getElementById with window load and document load events. Do you want to know the reason behind it? so let's go. we take a small example.

<script>
    var element = document.getElementById('own-element').innerHTML;
    alert(element);
</script>
<div id="own-element">Simple example</div>

When we use the getElementById before adding the html in DOM then it can not fetch the element. Very first thing when page loads, page html will be added to the DOM(document object model). If element is not added in the DOM you can not access that element. In above example we are trying to access the element before adding it to the DOM so above example it will not work.

Same case in jquery, until you do not add the jquery library in DOM. you can not use its functions. In below example we are trying to access the element after adding the element in DOM.

<div id="own-element">Simple example</div>
<script>
    var element = document.getElementById('own-element').innerHTML;
    alert(element);
</script>