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>
More Tips and Tricks for Javascript
- Javascript Arrays
- Javascript innerHTML
- How to Change CSS with Javascript
- Deleting an Item in an Array at a Specific Index
- Javascript Logical Statements and Loops
- Instagram Style Video Preload Static Effect
- How Events work in Javascript
- The Complete Guide to JavaScript Set Type
- Generating a Sitemap with Node.JS and Javascript Automatically
- How to Check if Object is Empty in JavaScript