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:


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.


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:


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:


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:


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:


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:


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:


<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):


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:


<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 1625575200056