How to add, remove, and modify HTML elements

JavaScript

The short answer

JavaScript provides DOM methods to create elements (createElement), add them to the page (appendChild, append), remove them (remove, removeChild), and modify their content and attributes. These are the building blocks of dynamic web pages.

Creating and adding elements

// Create a new element
const paragraph = document.createElement('p');
paragraph.textContent = 'Hello, world!';
paragraph.className = 'greeting';
// Add it to the page
document.body.appendChild(paragraph);

Other ways to add elements:

const container = document.querySelector('#container');
// append — adds to the end (can add multiple items and text)
container.append(element1, element2, 'some text');
// prepend — adds to the beginning
container.prepend(element);
// before / after — adds next to the element
existingElement.before(newElement);
existingElement.after(newElement);
// insertAdjacentHTML — inserts HTML string at a specific position
container.insertAdjacentHTML(
  'beforeend',
  '<p>New paragraph</p>'
);

Removing elements

// Modern way — call remove() on the element
const element = document.querySelector('#old-item');
element.remove();
// Older way — remove through the parent
const parent = document.querySelector('#list');
const child = document.querySelector('#old-item');
parent.removeChild(child);

Modifying elements

Changing content:

element.textContent = 'New text'; // safe, plain text
element.innerHTML = '<strong>Bold</strong>'; // parses HTML

Changing attributes:

element.setAttribute('data-id', '42');
element.getAttribute('data-id'); // "42"
element.removeAttribute('data-id');
// Or use properties directly
element.id = 'my-element';
element.className = 'active';

Changing styles:

element.style.color = 'red';
element.style.fontSize = '16px';
element.style.display = 'none';

Changing classes:

element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');
element.classList.contains('active'); // true/false

Replacing elements

const oldElement = document.querySelector('#old');
const newElement = document.createElement('div');
newElement.textContent = 'I am new';
oldElement.replaceWith(newElement);

Cloning elements

const original = document.querySelector('.card');
// Shallow clone (no children)
const clone = original.cloneNode(false);
// Deep clone (includes all children)
const deepClone = original.cloneNode(true);
document.body.appendChild(deepClone);

Interview Tip

Show that you know the modern methods (append, remove, replaceWith) as well as the older ones (appendChild, removeChild). In interviews, demonstrating classList for class manipulation is better than manually editing className strings. These are everyday operations that every frontend developer should know.

Why interviewers ask this

This is a fundamental DOM question. Interviewers want to see if you can work with the DOM directly, without relying on a framework. Even if you use React daily, knowing how to create, modify, and remove elements shows you understand what happens at the browser level.

Table of Contents