How to Create a Script Element in JavaScript

Last updated on September 13, 2022

To create a script element in JavaScript:

Use the document.createElement() method to create the script element.
Set the src attribute on the element object to a script file.
Include the script element in the HTML using the appendChild() method.

Consider this sample HTML markup:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

Here's how we can use JavaScript to create a script element in the HTML:

index.js

const script = document.createElement('script');

// use local file
// script.src = 'script.js';

script.src =
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';

script.async = true;

// make code in script to be treated as JavaScript module
// script.type = 'module';

script.onload = () => {
  console.log('Script loaded successfuly');
  const box = document.getElementById('box');
  box.textContent = 'The script has loaded.';
};

script.onerror = () => {
  console.log('Error occurred while loading script');
};

document.body.appendChild(script);

The document.createElement() method creates an HTML element specified by the tag name and returns the element. By passing a script tag, we create a script element.

const script = document.createElement('script');

We set the src property on the script element to specify the script file to be loaded. We specify a remote file with a URL, but we could also specify a local file with a relative or absolute file path.

// use local file
// script.src = 'script.js';

script.src =
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';

By setting the async property to true, the browser won't have to load and evaluate the script before continuing to parse the HTML. Instead, the script file will be loaded in parallel to reduce delays and speed up the processing of the page.

script.async = true;

The type attribute indicates what type of script the file is. If it is a JavaScript module, we'll need to set the type attribute to module to show this.

script.type = 'module';

For a complete list of all attributes supported by the script element, visit the MDN docs on the script element.

We listen for the onload event in order to perform an action when the script file has been loaded successfully.

script.onload = () => {
  console.log('Script loaded successfuly');
  const box = document.getElementById('box');
  box.textContent = 'The script has loaded.';
};

We listen for the onerror event so that we can perform a different action in case there was an error with loading the script.

script.onerror = () => {
  console.log('Error occurred while loading script');
};

The appendChild() method adds a DOM element as the last child of a specified parent element. By calling appendChild() on document.body, we add the script file to the body.

document.body.appendChild(script);

The script file is included in the body of the document.

To add the script file to the head of the document instead, we can replace document.body with document.head.

document.head.appendChild(script);

The script file is included in the head of the document.

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

How to Create a Script Element in JavaScript

Try Coding Beauty AI Assistant for VS Code

See also