Placement of JavaScript in HTML

For including JavaScript code in a HTML document, there is always a flexibility to put in head or body section.

A JavaScript function is nothing but a block of JavaScript code which can be executed when required.

In HTML, we need to insert JavaScript code between the <script>…</script> tags.

Most of the time we include JavaScript in <head>…</head> section, <body>…</body> section and both.

<script language="javascript">
document.getElementById("DIVID").innerHTML = "Hello World!";
</script>

In Head Section:

When you need to run a script for an event like click event, then you have to place the script in <head>…</head> section.

<html>
<head>
<script type="text/javascript">
function clickFunc() {
alert("Hello World!");
}
</script>
</head>
<body>
<input id="btn" type="button" onClick="clickFunc();" value="Click" />
</body>
</html>

In Body Section:

Suppose, you need a script to run just after the page loads. For example, after page loads you need to put some content in the page section. In that case, put your script in the <body>…</body> section.

<html>
<head>
</head>
<body>
<p>Hi there!</p>
<p id="paraID"></p>
<script type="text/javascript">
document.getElementById("paraID").innerHTML = "This is another paragraph!";
</script>
</body>
</html>

In both Head and Body section:

Also, you can put your script in both section depends on your requirements.

<html>
<head>
<script type="text/javascript">
function clickFunc() {
alert("Hello World!");
}
</script>
</head>
<body>
<p>Hi there!</p>
<p id="paraID"></p>
<script type="text/javascript">
document.getElementById("paraID").innerHTML = "This is another paragraph!";
</script>
<input id="btn" type="button" onClick="clickFunc();" value="Click" />
</body>
</html>

External File:

You can add also external JavaScript your HTML files.
Because, sometimes you can feel like a situation that you need to use same JavaScript on multiple pages of a site.

<html>
<head>
<script type="text/javascript" src="myJS.js" ></script>
</head>
<body>
<p>Hi there!</p>
</body>
</html>

In that case, you need to write all your source code in a single file with the extension “.js” and include as mention above.

Jacob Frazier

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.