To create a script element in JavaScript:
- Use the
document.createElement()method to create thescriptelement. - Set the
srcattribute 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);
To add the script file to the head of the document instead, we can replace document.body with document.head.
document.head.appendChild(script);
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
const script = document.createElement(‘script’);
script.src = ‘https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js’;
script.async = true;
document.body.appendChild(script);
gives me:
VM48:1 Refused to load the script ‘https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js’ because it violates the following Content Security Policy directive: “script-src chrome://resources chrome://test chrome://webui-test ‘self'”.
am i doing something wrong?
There’s a StackOverflow question on an issue like this. You might find it helpful: https://stackoverflow.com/questions/31211359/refused-to-load-the-script-because-it-violates-the-following-content-security-po