How do you add, remove, and modify HTML elements using JavaScript?

TL;DR

Create elements with document.createElement(), set text with textContent, and insert them with append(), prepend(), before(), after(), or replaceWith(). Remove an element with remove(). Use classList, properties, and attributes for targeted updates. Avoid assigning untrusted strings to innerHTML; use text and DOM construction, or an appropriate HTML sanitizer when the product intentionally accepts HTML.

// Adding an element
const newElement = document.createElement('div');
newElement.textContent = 'Hello, World!';
document.body.appendChild(newElement);

// Removing an element
const elementToRemove = document.getElementById('elementId');
elementToRemove?.remove();

// Modifying an element
const elementToModify = document.getElementById('elementId');
if (elementToModify) elementToModify.textContent = 'New content';

Adding, removing, and modifying HTML elements using JavaScript

Adding elements

To add an HTML element, you can use the document.createElement method to create a new element and then append it to a parent element using appendChild.

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

// Set its content
newDiv.textContent = 'Hello, World!';

// Append the new element to the body
document.body.appendChild(newDiv);

// See the changed document by running the code
console.log(document.body);

You can also use insertBefore to insert the new element before an existing child element.

const parentElement = document.getElementById('parent');
const newElement = document.createElement('p');
newElement.textContent = 'Inserted Paragraph';
const referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement);

Removing elements

To remove an HTML element, you can use the removeChild method on its parent element. Check that both references exist and the node is still that parent's child when the DOM may change asynchronously.

// Select the element to be removed
const elementToRemove = document.getElementById('elementId');

// Remove the element
elementToRemove.parentNode.removeChild(elementToRemove);

Alternatively, you can use the remove method directly on the element.

const elementToRemove = document.getElementById('elementId');
elementToRemove.remove();

Modifying elements

To modify an HTML element, you can change its properties such as innerHTML, textContent, or attributes.

const elementToModify = document.createElement('div');

// Change its text content
elementToModify.textContent = 'New Text Content';

// Change an attribute
elementToModify.setAttribute('class', 'new-class');

console.log(elementToModify);

When intentional, trusted markup is already available as DOM nodes, replaceChildren() can replace a container without string parsing:

const message = document.createElement('strong');
message.textContent = 'Saved';
elementToModify.replaceChildren(message);

You can also use methods like classList.add, classList.remove, and classList.toggle to modify the element's classes.

const element = document.getElementById('elementId');

// Add a class
element.classList.add('new-class');

// Remove a class
element.classList.remove('old-class');

// Toggle a class
element.classList.toggle('active');

Further reading

• MDN Web Docs: Document.createElement
• MDN Web Docs: Node.appendChild
• MDN Web Docs: Node.removeChild
• MDN Web Docs: Element.textContent
• MDN Web Docs: Element.classList
• MDN Web Docs: Element.remove

Exercises