Yogesh Chauhan's Blog

What is the best way to add JavaScript Code into HTML?

in HTML & JavaScript on July 24, 2019

It’s a common question when you start learning JavaScript and wonder that where should you put your JavaScript code in HTML file. I have faced it. Many others have as well. Let’s go through that amazing JavaScript script tag one by one and decide together.

First of all, all the JavaScript code must be inserted between script tag. I know, I know. That is really basic information but for those who don’t know how JavaScript works, I needed to tell them. Let me show the code as well.

document.getElementById("example").innerHTML = 
  "All JavaScript code must be written in script tag, like this code.";

PLEASE NOTE: Although JavaScript is the default scripting language in HTML, there are many old JavaScript examples in which you’ll see type attribute:

  <script type="text/javascript">

which is not required at all but it used to be required. Also, in php, you need to add that type attribute as well in order to include JavaScript files.

How many script tags you can insert in one HTML page?

The answer is AS MANY AS YOU WANT.

And script tags can be placed in either body or head tag.

Can you add script tag in body and head both?


Let's look at the following examples for adding script tag to HTML head tag.

  function Function() {
    document.getElementById("example").innerHTML = "Script tag is in head tag.";

Now, let's look at the following examples for adding script tag to HTML body tag.

  <button type="button" onclick="Function2()">Click to know about script placement</button> <br>
  <p id="example2"></p> <br>

    function Function2() {
      document.getElementById("example2").innerHTML = "Script tag is in body tag.";

REMEMBER to place JavaScript code at the bottom of the HTML code, right before closing the body tag. When the browser interprets and displays the page, the JavaScript code takes longer time to interpret. So if you place the code at the bottom, it'll improve the display speed.

Now, apart from above methods to add JavaScript code, there is one more and that is to add external javascript file to the HTML code. All you do is write down the same code which is in between the script tag to a different file and name it as "filename.js". Just add ".js" at the end to make it a JavaScript file. for e.g.

  // This is our .js file code
  function Function2() {
    document.getElementById("example2").innerHTML = "Script tag is in body tag.";

REMEMBER that external .js file does not contain any script tag itself.

Now add that file to the HTML code like this..using script tag.

  <script src="FILENAME.js"></script>

You can place this line between the head tag or body tag.

Now, that brings us to our main question of what is the best way to add js code to HTML code.

The answer is "external JS files".


   It separates the HTML code and JS code.

   It's really easy to read both files and maintain easily.

   It's really convenient when you want to use the same JS code to many webpages.

   Browser caches the JS files separately. So, it can really speed up the page loads.

You can even use a .js file from external references like from the web... for e.g.

    <script src="https://www.yogeshchauhan.com/JS/FILENAME.js"></script>

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to check if radio button is checked or not using JavaScript?JavaScriptWordPress: How to get field values in Advanced Custom Fields?WordPressHow to make HTML form interactive and using CSS?CSSHow to reference an aliased column in the WHERE clause?SQL/MySQLaddcslashes() and addslashes() String Functions in PHPPHPWhat’s the difference between variables in CSS and SCSS (Sass)?CSS