To create a script element using JavaScript, use the createElement() method. Set the src attribute to the external script file. Finally, append the element to the document’s head section.
Below is an example of JavaScript code.
How To Create A Script Element In JavaScript
<script>
var script = document.createElement("script");
script.setAttribute( "src", "https://code.jquery.com/jquery-3.4.1.min.js" );
script.setAttribute("async", true);
document.head.appendChild(script);
</script>You can also add the onload event handler to the script element. This will make sure that the external file is loaded before running any code.
<script>
var script = document.createElement("script");
script.setAttribute( "src", "https://code.jquery.com/jquery-3.4.1.min.js" );
script.setAttribute("async", true);
script.onload = function() {
alert("loaded");
};
document.head.appendChild(script);
</script>You can also add the onError event handler to the script element. This will make sure that if there is an error loading the external file, it will be caught.
<script>
var script = document.createElement("script");
script.setAttribute( "src", "https://code.jquery.com/jquery-3.4.1.min.js" );
script.setAttribute("async", true);
script.onerror = function() {
alert("error loading file");
};
document.head.appendChild(script);
</script>Let’s put it all together in an HTML –
<html>
<head>
<title> JS Create Element </title>
</head>
<body>
<script>
var script = document.createElement("script");
script.setAttribute( "src", "https://code.jquery.com/jquery-3.4.1.min.js" );
script.setAttribute("async", true);
script.onload = function() {
alert("loaded");
};
script.onerror = function() {
alert("error loading file");
};
document.head.appendChild(script);
</script>
</body>
</html>When you run the above code, you will see an alert saying “loaded” if the file is loaded successfully. If there is an error loading the file, you will see an alert saying “error loading file”.
createElement Method
The createElement() method is used to create an element node.
appendChild Method
The appendChild() method appends a child node to the end of a specified parent node. In our example, we are appending the script element created using the createElement() method to the document’s head section.
setAttribute Method
The setAttribute() method is used to add or modify an attribute of an HTML element. It takes two parameters – name and value. If the value already exists, it will be updated.
In our example, we are setting the src and async attributes for the script element created using the createElement() method.
onload Method
The onload method is used to handle events when a resource has been loaded. In our example, we are using it to execute code only after the external file has been loaded.
onerror Method
The onerror method is used to handle events when there is an error loading a resource. In our example, we are using it to execute code if there is an error loading the external file.
Attributes For Script Element
The various attributes for the script element are –
src – This attribute specifies the URL of an external script file. This is a required attribute.
type – This attribute specifies the type of script. The default value is “text/javascript”. You can set it to “module” if you’re using a ES6 module.
async – This Boolean attribute tells the browser to download and execute the script asynchronously. Without this attribute, the browser must first download and execute the script before continuing to process the rest of the page.
defer – This Boolean attribute tells the browser to execute the script after the page has been loaded. This can be useful if the script uses document.write().
language – This attribute is deprecated and should not be used.
There are a lot of other attributes that can be used with the script> tag, but these are the most common ones.
External JavaScript Files
If you have multiple JavaScript files, it is best to store them in an external directory and link to them using the src attribute. This way, your HTML code will be cleaner and more organized.
To link to an external JavaScript file, you need to add a script tag with the src attribute and set it equal to the location of your external JavaScript file.
For example, if your external JavaScript file is located at https://example.com/js/script.js, you would add the following code to your HTML file:
<script src=”https://example.com/js/script.js”></script>
When using an external JavaScript file, you must put the <script> tag after the <body> tag or else your page will not load properly.
Conclusion – How To Create A Script Element Using JavaScript
This article covered how to create a script element using JavaScript, how to set various attributes for the script element, and how to use the onload and onerror methods. With this knowledge, you should be able to create an element and set attributes for it using JavaScript.
External Resources
https://www.w3schools.com/jsref/met_node_appendchild.asp
https://www.w3schools.com/jsref/met_element_setattribute.asp