Create a Script element using JavaScript

# Create a Script element using JavaScript

To create a script element in JavaScript:

Use the document.createElement() method to create the script element.
Set the src attribute on the element to a local or remote JavaScript file.
Add the element to the page using the appendChild() method.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box"></div>

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

// 👇️ local file
// script.setAttribute('src', 'another-file.js');

// 👇️ remote file
script.setAttribute(
  'src',
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
);

script.setAttribute('async', '');

// 👇️ optionally set script to be treated as JS module
// script.setAttribute('type', 'module');

script.onload = function handleScriptLoaded() {
  console.log('script has loaded');

  document.getElementById('box').textContent = 'Script loaded successfully';
};

script.onerror = function handleScriptError() {
  console.log('error loading script');
};

document.head.appendChild(script);

create script element using javascript

The code for this article is available on GitHub

We used the document.createElement() method to create the script element.

index.js

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

The only argument we passed to the method is the type of element to be created.

The createElement method returns the newly created element.

We used the setAttribute() method to set multiple attributes on the element.

The setAttribute method takes 2 parameters:

name - the name of the attribute whose value is to be set.
value - the value to assign to the attribute.

If the attribute already exists on the element, the value is updated. Otherwise, a new attribute is added with the specified name and value.

index.js

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

// 👇️ local file
// script.setAttribute('src', 'another-file.js');

// 👇️ remote file
script.setAttribute(
  'src',
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
);

script.setAttribute('async', '');

The code for this article is available on GitHub

We set the script's src attribute to a remote JavaScript file. However, you could set this to a path pointing to a file on your local file system.

We set the script's async attribute. When the async attribute is present, the script gets fetched in parallel to parsing and gets evaluated as soon as it is available.

You can optionally set the script's type attribute to module if you use JavaScript modules.

index.js

Copied!
// 👇️ optionally set script to be treated as JS module
script.setAttribute('type', 'module');

We added the onload event handler on the element.

The load event fires when the script has loaded successfully.

You can also add the onerror event on the element. The event fires when the script fails to load.

Note that you don't have to add these event handlers if you don't need to invoke a function when the script is loaded or fails to load.

There are many other attributes you might need to set on the script element depending on your use case. Here is a complete list from the MDN script docs.

If I load the example from the article in my browser, I can see that the script successfully loads on my page.

script created successfully

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Create a Script element using JavaScript

# Create a Script element using JavaScript

# Additional Resources

Borislav Hadzhiev