How to Add an Element to the DOM in JavaScript

Learn how to add DOM elements to an HTML document with confidence using pure JavaScript.

Published Categorized as JavaScript

Let’s dive into one of the fundamental operations of web development: adding a new element to the Document Object Model (DOM) with JavaScript.

The DOM is the hierarchical structure that represents the HTML markup of a web page, and knowing how to manipulate it is the bread and butter for creating dynamic and responsive web applications.

Adding a new element to the DOM is a thing that needs to be done when building web pages, and mastering this requirement with JavaScript can be a powerful tool in your web development toolkit. So let’s get started!

Creating a New DOM Element

There’s more than one way to add a new element to the DOM, and each has its unique pros and cons. In this tutorial, however, we’ll focus on the two most common ways: using createElement() and innerHTML().

Using the createElement() and appendChild() Methods

The createElement method allows you to create a new HTML element using JavaScript. Here’s an example that creates a new div element with the class name my-div:

// Create element
const newDiv = document.createElement('div');

// Add my-div to class list (optional)

In this example, we first create a new div element using the createElement method. We then add the class name my-div to the element using the classList property. Note that we didn’t append the new element to the DOM yet – we’ll do that in the next step.

Once you’ve created a new element using createElement, you can add it to the DOM using the appendChild method. Here’s an example that appends the newDiv element we created in the previous step to the <body> element:

// Append newDiv as a child element at the end of the <body> tag

This method will add the newDiv element to the end of the <body> tag, nesting it inside that tag as a child element.

Of course, you can target any DOM element you want using a CSS selector with the querySelector() method. Here’s an example that appeds newDiv as a child of the element with an ID of #add-here:

// Append newDiv as a child element at the end of the #add-here element

Using the innerHTML() Property

Another way to add new elements to the DOM is to use the innerHTML property. Here’s an example that creates a new div element with the class name my-div and adds it to the body element of the web page using innerHTML:

// Replace body contents with innerHTML
document.body.innerHTML += '<div class="my-div"></div>';

In this example, we use the innerHTML property to add a new div element with the class name my-div to the body element of the web page. This is a shorthand way of creating and adding a new element to the DOM, but it can be less efficient than using createElement and appendChild for more complex HTML structures.

How to Choose

As a general rule, if you’re adding simple, single elements like a div or a p tag, using innerHTML can be a quick and easy way to get the job done.

However, if you’re adding more complex elements with many child elements or specific attributes, createElement is usually the better choice. This allows you to build up the element’s structure programmatically and modify its attributes directly, which can be more efficient and easier to read and maintain than using a long string of HTML.

Also, and this is very important for web developers to understand, using innerHTML to add new content to an element will replace any existing content that was previously inside that element. For example, if you have an HTML element with the id my-element that contains some text:

<div id="my-element">Hello, world!</div>

And you use innerHTML to add new content to it:

document.getElementById('my-element').innerHTML = '<p>This is new content!</p>';

The original content “Hello world!” will be replaced with the new content “This is new content!”. If you want to add content to the element without removing the existing content, you can use methods like appendChild to add new child nodes to the element.

When using innerHTML, be careful and sanitize any user input to prevent cross-site scripting (XSS) attacks. If the content being added to the DOM comes from user input, it’s important to sanitize it first to remove any potentially dangerous content. createElement doesn’t have this concern, since it builds up the element programmatically instead of relying on user-generated content.

In Summary

MethodAdvantagesDisadvantagesWhen to use
innerHTML– Quick and easy to use
– Allows you to add HTML as a string
– Can be used to remove all child nodes at once
– Overrides existing content
– Can introduce XSS vulnerabilities
– Can be slower for large or complex HTML
– For simple, one-off additions to an element
createElement– More secure, as it does not rely on user-generated content
– Allows you to add elements with specific attributes and child nodes
– More verbose and requires more code
– Requires you to build up the element programmatically
– For adding more complex elements or structures programmatically
– When you want more control over the added elements

By Dim Nikov

Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.

Leave a comment

Your email address will not be published. Required fields are marked *