Home » Html » What's the difference between putting script in head and body?

What's the difference between putting script in head and body?

Posted by: admin November 29, 2017 Leave a comment

Questions:

I was getting a problem .

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
  alert(document.getElementsByTagName("li").length); 
  </script>
  <title>purchase list</title>
</head>
<body>
  <h1>What to buy</h1>
  <ul id="purchases">
    <li> beans</li>
    <li>Cheese</li>
  </ul>
</body>

When I put scripts in head, the result shows 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Shopping list</title>
</head>
<body>
  <h1>What to buy</h1>

  <ul id="purchases">
    <li>Cheese</li> 
    <li>Milk</li>
    <script type="text/javascript">
    alert(document.getElementsByTagName("li").length);
    </script>
  </ul>
</body>

When I tried to put scripts in body, the result shows 2. why there is such a difference?
what is the main difference?

Answers:

What’s the difference between putting script in head and body?

The time that it runs.

When I put scripts in head, the result shows 0 Shopping list

The elements you are trying to access don’t exist when the script runs (since they appear after the script in the document).

Note that you can write a script so that a function is called later (for various values of later including “when the entire document has loaded”) using event handlers.

Questions:
Answers:

It’s simple, JavaScript will go from up-down, unless you tell it to do something else. By the time it reaches the li elements, the JavaScript code has already been completed.

If you want to keep it in the head however, you could use the document.ready function and it will load only after the HTML it’s loaded.

Questions:
Answers:

Head will get rendered before Body. If you’re trying to access your li tags in the head, the obvious answer is that they are not created until the browser renders the body section and therefore cannot be referenced.

Questions:
Answers:

When you call:

alert(document.getElementsByTagName("li").length); 

You want to get an element that does not exist yet. because the head is the first thing that runs when you load the page.

it’s searching for the li element, but it isn’t yet there when the head loads.

You have to put it in the body because then, the list items exist. then it works.

Questions:
Answers:

Because at the time of you calling it in the head, the li doesn’t yet exist (As far as the DOM is concerned) – F4r-20 1 min ago

This is correct.
But, try this:

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
    window.onload = function(){ alert(document.getElementsByTagName("li").length); }
  </script>
  <title>purchase list</title>
</head>

<body>
  <h1>What to buy</h1>
  <ul id="purchases">
    <li> beans</li>
    <li>Cheese</li>
  </ul>
</body>

Questions:
Answers:

When scripts are included in the head they load or run before the content of the page. When you include them in the body they load or run after the preceding html. It’s usually good practice to put scripts as close to the end of the body as possible.

Questions:
Answers:

If you put script in head, javascript code gets executed even before controls in body tags are rendered. So if you want to keep your scripts in head tag, make sure they are executed once onload is completed. Below is an example:

 <script type="text/javascript">
function MyFunction() {
    alert(document.getElementsByTagName("li").length);
}
window.onload = MyFunction;
</script>

Questions:
Answers:

Generally scripts and CSS files must be fit into head, as good practice.

For more details about when to put in head and body tag, refer this link – Where should I put the CSS and Javascript code in an HTML webpage?
&
Should I write script in the body or the head of the html?