What's the difference between putting script in head and body?
JavascriptHtmlJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
> 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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
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.
Solution 4 - Javascript
> 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>
Solution 5 - Javascript
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.
Solution 6 - Javascript
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.
Solution 7 - Javascript
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 - https://stackoverflow.com/q/6625773/2902347 & https://stackoverflow.com/q/3531314/2902347
Solution 8 - Javascript
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>
Solution 9 - Javascript
Following code executes the script in the head tag. Once without JQuery and then with JQuery that instructs the alert to display when the document is loaded $(document).reaady()
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
// First alert will show # of opttions as 0, because the document is not ready yet
alert(document.getElementsByTagName("li").length);
// First alert will show the correct # of opttions as 2
$(document).ready(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>
Solution 10 - Javascript
HTML document executes in Top-Down Approach.
-
In your case when you execute your HTML Document, it will execute head first. and as you can see, you wrote a script tag inside the head.
-
so, here a script tag will execute first. inside a script tag what you are going to do, you are finding the length of li tag which is available inside the body tag.
-
but at this moment, the browser doesn't execute the body tag yet.
-
so, your script will get 0 as the result.