Javascript

How to Create new Elements with Javascript

Sponsor

In Javascript, it is possible to programatically create new HTML elements. This lets you add things to the page, given certain conditions.

The basics of creating elements

To get started creating elements, we need to define what element it is. To do that, we can use the document.createElement function:

javascript Copy
const myNewElement = document.createElement('div');

Now we have a new div, but it doesn't exist anywhere yet. This variable is now of type HTMLObject. That means we can use all the typical HTMLObject properties on it. Before we add it to our page, let's give add some stuff to it.

javascript Copy
const myNewElement = document.createElement('div'); // Lets make it red myNewElement.style.color = 'red'; // Lets add a class called 'active' to it myNewElement.classList.add('active'); // Lets add an attribute called 'data-attribute' myNewElement.setAttribute('data-attribute', true); // Lets add some text inside the div myNewElement.textContent = 'I am a created element.'

Great, now we've added everything we need to our element. Let's add it to our document.

How to add Javascript HTML Elements to a Page

The easiest way to add new HTML elements to a page is to use append. Suppose we want to add our newly created HTML element to a div with id 'my-id'. We could do somthing like this:

javascript Copy
const myNewElement = document.createElement('div'); // Lets make it red myNewElement.style.color = 'red'; // Lets add a class called 'active' to it myNewElement.classList.add('active'); // Lets add an attribute called 'data-attribute' myNewElement.setAttribute('data-attribute', true); // Lets add some text inside the div myNewElement.textContent = 'I am a created element.' // Let's append our item to the HTML document. document.getElementById('my-id').append(myNewElement);

To demonstrate, here is an example where clicking on a button creates a new element within a div:

javascript Copy
document.getElementById('button').addEventListener('click', function(e) { const myNewElement = document.createElement('div'); // Lets make it red myNewElement.style.color = 'red'; // Lets add a class called 'active' to it myNewElement.classList.add('active'); // Lets add an attribute called 'data-attribute' myNewElement.setAttribute('data-attribute', true); // Lets add some text inside the div myNewElement.textContent = 'I am a created element.' // Let's append our item to the HTML document. document.getElementById('my-id').append(myNewElement); });

Prepending HTML Elements with Javascript

Prepending means to put the element at the start, rather than the end, and that can easily be done using prepend instead of append:

javascript Copy
document.getElementById('my-id').prepend(myNewElement);

Alternative to append with innerHTML

Another way we can append HTML directly to a page is by changing an elements innerHTML. Every HTML Element has an innerHTML property which is all of the HTML inside that element.

Note: there are security concerns with innerHTML, but it is typically fine if you have tight control over the HTML that is being made. An example adding a created element using innerHTML looks like this:

javascript Copy
const myNewElement = document.createElement('div'); // Lets make it red myNewElement.style.color = 'red'; // Lets add a class called 'active' to it myNewElement.classList.add('active'); // Lets add an attribute called 'data-attribute' myNewElement.setAttribute('data-attribute', true); // Lets add some text inside the div myNewElement.textContent = 'I am a created element.' // Let's append our item to the HTML document. document.getElementById('my-id').innerHTML = document.getElementById('my-id').innerHTML + myNewElement.outerHTML;

You can also prepend elements by putting the new element before the original HTML, or in other words, by reversing the order:

javascript Copy
document.getElementById('my-id').innerHTML = myNewElement + document.getElementById('my-id').innerHTML;

Inserting HTML Elements after a particular element

It is also possible to insert a new element after a specific HTML node. For example, suppose you have a div that looks like this:

html Copy
<div id="my-div"> I am a div! <span id="some-span">Hello</span> <em>This is italic</em> </div>

This div has 3 nodes within it: the text, span, and em, all count as individual nodes. As such, we can use insertBefore to insert our new element before node 2 (the span):

javascript Copy
let theSpan = document.getElementById('some-span'); document.getElementById('my-id').insertBefore(myNewElement, theSpan);

It is a similar syntax as before - we get our element by its ID, and then use insertBefore. Then, we have two parameters - the first is the new element we want to insert (myNewElement), and the second is the reference for the element we are inserting myNewElement before.

By doing this, we end up with this HTML:

html Copy
<div id="my-div"> I am a div! <div class="active" data-attribute="true" style="color: red;">I am a created element.</div> <span id="some-span">Hello</span> <em>This is italic</em> </div>
Last Updated Tuesday, 6 July 2021

Subscribe to Newsletter

Subscribe to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email