Apr 15, 2022
The createElement() function in JavaScript is used to programatically add elements to the DOM. It has one required argument, the type of element to create, like 'div' or 'img'. For example, the button below creates and appends a new <div> element.
Below is the HTML and JavaScript for the above button.
<div id="append-elements"></div> <button title="addElement()">Click to Add</button>function addElement() { const doc = document.createElement('div'); doc.innerHTML = 'Hello World'; const container = document.querySelector('#append-elements'); container.appendChild(doc); }Recursive createElement()
Once you create an element, you can use methods like appendChild() to create and append more elements.
const parent = document.querySelector('#nested'); // Create one element... const child = document.createElement('div'); child.innerText = 'I am the parent\'s child'; // Create another element const grandchild = document.createElement('h2'); grandchild.innerText = 'I am the grandchild'; // Append 2nd element as a child of the 1st elemtn parent.appendChild(child); child.appendChild(grandchild);Below is the output of the above JavaScript.
More Fundamentals Tutorials
- Calculate the Median of an Array in JavaScript
- The encodeURIComponent() Function in JavaScript
- How to Check if a Date is Between Two Dates in JavaScript
- Check a String for Numbers in JavaScript
- Rename Variables When Using Object Destructuring in JavaScript
- Split on Multiple Characters in JavaScript
- Empty Objects are Truthy in JavaScript?
Examples
Create a <p> element and append it to the document:
const para = document.createElement("p");
para.innerText = "This is a paragraph";
document.body.appendChild(para);
Try it Yourself »
Create a <p> element and append it to an element:
const para = document.createElement("p");
para.innerHTML =
"This is a paragraph.";
document.getElementById("myDIV").appendChild(para);
Try it Yourself »
More examples below.
Definition and Usage
The createElement() method creates an element node.
Syntax
document.createElement(type)
Parameters
Parameter | Description |
type | Required. The type of element to create. |
Return Value
Type | Description |
Node | The created element node. |
More Examples
Create a button:
const btn = document.createElement("button");
btn.innerHTML = "Hello Button";
document.body.appendChild(btn);
Try it Yourself »
Browser Support
document.createElement() is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |
Examples
Get the id of the first anchor:
let id = document.getElementsByTagName("a")[0].id;
Try it Yourself »
Change the id of an element:
document.getElementById("demo").id = "newid";
Try it Yourself »
Change the font size of "myP":
const element = document.getElementById("myP");
element.style.fontSize = "30px";
Try it Yourself »
Definition and Usage
The id property sets or returns the value of an element's id attribute.
Syntax
Return the id property:
Set the id property:
Property Value
Value | Description |
id | The id of the element. |
Return Value
Type | Description |
String | The id of the element. |
Browser Support
element.id is supported in all browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |