Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Create element – JavaScript

Summary

To create and append element using JavaScript, use the createElement() and appendChild() methods:

// Create new element
const newParagraph = document.createElement('p');

// Add text content to new element
newParagraph.textContent = 'Test paragraph';

// Select parent element
const parentDiv = document.querySelector('div');

// Append new element to parent element
parentDiv.appendChild(newParagraph);

Details

You can also insert the newly created element before another element. Given the following HTML code:

<div>
  <p>First paragraph</p>
</div>

You can use the following JavaScript code to insert a new paragraph before the paragraph that’s already inside the div:

const myDiv = document.querySelector('div');
const firstParagraph = document.querySelector('p');

myDiv.insertBefore(newParagraph, firstParagraph);

Demo

Exercises

Recreate the JS code from the Demo section in your JS file. Then try customizing the text inside the element.

References

Manipulating documents on MDN (see the section called “Creating and placing new nodes”)

createElement() on MDN

appendChild() on MDN

insertBefore() on MDN

Back to: JavaScript Reference > JS DOM