Document: createElement() method
In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn’t recognized.
Syntax
createElement(tagName) createElement(tagName, options)
Parameters
A string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName. Don’t use qualified names (like «html:a») with this method. When called on an HTML document, createElement() converts tagName to lower case before creating the element. In Firefox, Opera, and Chrome, createElement(null) works like createElement(«null») .
An object with the following properties:
The tag name of a custom element previously defined via customElements.define() . See Web component example for more details.
Return value
Note: A new HTMLElement is returned if the document is an HTMLDocument, which is the most common case. Otherwise a new Element is returned.
Examples
Basic example
This creates a new and inserts it before the element with the ID » div1 «.
HTML
doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Working with elementstitle> head> body> div id="div1">The text above has been created dynamically.div> body> html>
JavaScript
.body.onload = addElement; function addElement() // create a new div element const newDiv = document.createElement("div"); // and give it some content const newContent = document.createTextNode("Hi there and greetings!"); // add the text node to the newly created div newDiv.appendChild(newContent); // add the newly created element and its content into the DOM const currentDiv = document.getElementById("div1"); document.body.insertBefore(newDiv, currentDiv); >
Result
Web component example
The following example snippet is taken from our expanding-list-web-component example (see it live also). In this case, our custom element extends the HTMLUListElement , which represents the element.
// Create a class for the element class ExpandingList extends HTMLUListElement constructor() // Always call super first in constructor super(); // constructor definition left out for brevity // … > > // Define the new element customElements.define("expanding-list", ExpandingList, extends: "ul" >);
If we wanted to create an instance of this element programmatically, we’d use a call along the following lines:
let expandingList = document.createElement("ul", is: "expanding-list" >);
The new element will be given an is attribute whose value is the custom element’s tag name.
Note: For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string’s value is the custom element’s tag name.
Specifications
Browser compatibility
BCD tables only load in the browser
See also
- Node.removeChild()
- Node.replaceChild()
- Node.appendChild()
- Node.insertBefore()
- Node.hasChildNodes()
- document.createElementNS() — to explicitly specify the namespace URI for the element.
Found a content problem with this page?
This page was last modified on Jul 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
How to Create a Script Element in JavaScript
Here’s how we can use JavaScript to create a script element in the HTML:
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.
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.
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.
We listen for the onerror event so that we can perform a different action in case there was an error with loading the 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);
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
JavaScript CreateElement
Summary: in this tutorial, you will learn how to use the JavaScript document.createElement() to create a new HTML element and attach it to the DOM tree.
To create an HTML element, you use the document.createElement() method:
let element = document.createElement(htmlTag);Code language: JavaScript (javascript)The document.createElement() accepts an HTML tag name and returns a new Node with the Element type.
1) Creating a new div example
Suppose that you have the following HTML document:
html> html> head> meta charset="utf-8"> title>JS CreateElement Demo title> head> body> body> html>Code language: HTML, XML (xml)The following example uses the document.createElement() to create a new element:
let div = document.createElement('div');Code language: JavaScript (javascript)And add an HTML snippet to the div :
div.innerHTML = 'p>CreateElement example p>';Code language: HTML, XML (xml)To attach the div to the document, you use the appendChild() method:
document.body.appendChild(div);Code language: CSS (css)html>html> head> meta charset="utf-8"> title>JS CreateElement Demo title> head> body> script> let div = document.createElement('div'); div.id = 'content'; div.innerHTML = 'CreateElement example
'; document.body.appendChild(div); script> body> html>Code language: HTML, XML (xml)
Adding an id to the div
If you want to add an id to a div , you set the id attribute of the element to a value, like this:
let div = document.createElement('div'); div.id = 'content'; div.innerHTML = 'CreateElement example
'; document.body.appendChild(div);Code language: JavaScript (javascript)Adding a class to the div
The following example set the CSS class of a new div note :
let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; div.innerHTML = 'CreateElement example
'; document.body.appendChild(div);Code language: JavaScript (javascript)Adding text to a div
To add a piece of text to a , you can use the innerHTML property as the above example, or create a new Text node and append it to the div :
// create a new div and set its attributes let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; // create a new text node and add it to the div let text = document.createTextNode('CreateElement example'); div.appendChild(text); // add div to the document document.body.appendChild(div);Code language: JavaScript (javascript)Adding an element to a div
To add an element to a div , you create an element and append it to the div using the appendChild() method:
let div = document.createElement('div'); div.id = 'content'; div.className = 'note'; // create a new heading and add it to the div let h2 = document.createElement('h2'); h2.textContent = 'Add h2 element to the div'; div.appendChild(h2); // add div to the document document.body.appendChild(div); Code language: JavaScript (javascript)2) Creating new list items ( li ) example
Let’s say you have a list of items:
ul id="menu"> li>Home li> ul> Code language: HTML, XML (xml)The following code adds two li elements to the ul :
let li = document.createElement('li'); li.textContent = 'Products'; menu.appendChild(li); li = document.createElement('li'); li.textContent = 'About Us'; // select the ul menu element const menu = document.querySelector('#menu'); menu.appendChild(li); Code language: JavaScript (javascript)ul id="menu"> li>Home li> li>Products li> li>About Us li> ul>Code language: HTML, XML (xml)3) Creating a script element example
Sometimes, you may want to load a JavaScript file dynamically. To do this, you can use the document.createElement() to create the script element and add it to the document.
The following example illustrates how to create a new script element and loads the /lib.js file to the document:
let script = document.createElement('script'); script.src = '/lib.js'; document.body.appendChild(script);Code language: JavaScript (javascript)You can first create a new helper function that loads a JavaScript file from an URL:
function loadJS(url) < let script = document.createElement('script'); script.src = url; document.body.appendChild(script); >Code language: JavaScript (javascript)And then use the helper function to load the /lib.js file:
loadJS('/lib.js');Code language: JavaScript (javascript)To load a JavaScript file asynchronously, you set the async attribute of the script element to true :
function loadJSAsync(url) < let script = document.createElement('script'); script.src = url; script.async = true; document.body.appendChild(script); >Code language: JavaScript (javascript)Summary
- The document.createElement() creates a new HTML element.
- The element.appendChild() appends an HTML element to an existing element.
Javascript createelement script with content
Last updated: Nov 22, 2022
Reading time · 2 min
# 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.
Copied!DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> div id="box">div> script src="index.js"> script> body> html>
And here is the related JavaScript code.
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);
Copied!const script = document.createElement('script');