Home/ Questions/Q 9123245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T06:17:32+00:00

Possible Duplicate: Where to place Javascript in a HTML file? Should I write script

  • 0

Possible Duplicate:
Where to place Javascript in a HTML file?
Should I write script in the body or the head of the html?

I’ve always wondered, mainly because when creating pages I always run into trouble, based on the following thing:

When do you write your javascript

  • In the <head>
  • In the <body>
  • with a $(document).ready()

I could be stupid, but I’ve had a few times when my JavaScript (/jQuery) wasn’t executed because of the wrong place or yes or no doc.ready() command. So I’m really wondering so.

Same goes for jQuery and ‘var’ command

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    $(document).ready() simply ensures that all DOM elements are loaded before your javascript is loaded.

    When it doesn’t matter

    Without waiting for this event to fire, you may end up manipulating DOM elements or styles that are yet to exist on the page. the DOM ready event also allows you more flexibility to run scripts on different parts of the page. For example:

    <div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

    will run because the map div has been loaded before the script runs. In fact, you can get some pretty good performance improvements by placing your scripts at the bottom of the page.

    When it does matter

    However, if you are loading your scripts in the <head> element, most of your DOM has not loaded. This example will not work:

    <script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

    will not, since the map div has not been loaded.

    A safe solution

    You can avoid this by simply wait until the entire DOM has loaded:

    <script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

    There are plenty of articles that explain this, as well as the jQuery documentation itself.

    • 0