JavaScript DOM
JavaScript Creating Elements
createElementbuilds a new element that can then be added to the page.
A created element exists in memory but is invisible until you attach it.
This is the safe alternative to building pages out of innerHTML strings.
Example
Example
javascript
document.body.innerHTML = '<div id="box"></div>';
const p = document.createElement("p");
p.textContent = "Made by JavaScript";
document.getElementById("box").append(p);
console.log(document.querySelectorAll("p").length);The output is 1.
Creating and Attaching
document.createElement takes a tag name and returns a new element.
The element is not on the page until it is appended to something.
append adds it as the last child.
Syntax
Syntax
javascript
const element = document.createElement("p");
parent.append(element);Nothing appears until the element is attached.
Not Visible Until Attached
This is the step people most often forget.
Example
Example
javascript
document.body.innerHTML = "";
const p = document.createElement("p");
p.textContent = "Floating";
console.log(document.querySelectorAll("p").length);The output is 0, because it was never appended.
Setting It Up First
Content, classes and attributes can all be set before attaching.
Example
Example
javascript
document.body.innerHTML = '<div id="box"></div>';
const button = document.createElement("button");
button.textContent = "Save";
button.className = "primary";
button.setAttribute("type", "button");
document.getElementById("box").append(button);
console.log(document.querySelector("button").className);Preparing it first means the page is only touched once.
Building a List
Creating elements in a loop is the usual way to render data.
Example
Example
javascript
document.body.innerHTML = '<ul id="list"></ul>';
const names = ["Ada", "Grace", "Alan"];
const list = document.getElementById("list");
names.forEach(function (name) {
const li = document.createElement("li");
li.textContent = name;
list.append(li);
});
console.log(document.querySelectorAll("li").length);The output is 3.
Creating Text Safely
Because the name goes through textContent, tags in it cannot become elements.
This is the main reason to prefer createElement over innerHTML.
Example
Example
javascript
document.body.innerHTML = '<div id="box"></div>';
const li = document.createElement("li");
li.textContent = "<script>bad<" + "/script>";
document.getElementById("box").append(li);
console.log(document.querySelectorAll("script").length);No script element was created.
Cloning an Element
cloneNode(true) copies an element and everything inside it.
Example
Example
javascript
document.body.innerHTML = '<div id="box"><p class="row">One</p></div>';
const original = document.querySelector(".row");
const copy = original.cloneNode(true);
document.getElementById("box").append(copy);
console.log(document.querySelectorAll(".row").length);Passing false would copy the element without its contents.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript createElement</title>
</head>
<body>
<h1>Creating Elements</h1>
<ul id="list"></ul>
<script>
const names = ["Ada", "Grace", "Alan"];
const list = document.getElementById("list");
names.forEach(function (name) {
const item = document.createElement("li");
item.textContent = name;
list.append(item);
});
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try adding a class:
Set item.className = "row" before appending it.
Important Points
createElementmakes an element that is not yet on the page.- It only appears once it is appended to a parent.
- Set content and attributes before attaching it.
- Creating elements avoids the injection risk of
innerHTML. cloneNode(true)copies an element and its contents.
Conclusion
createElement is how JavaScript builds new parts of a page.
It takes one more line than innerHTML but is safer and clearer.
Combined with a loop it turns data into markup.