DOM Manipulation

Once you know how to select elements in the DOM, the next crucial step is learning how to manipulate them. DOM manipulation allows you to dynamically create, modify, and remove elements, text, styles, and attributes on a webpage without needing to reload the browser.

1. Modifying Element Content

textContent

Gets or sets the text content of a node and its descendants. It treats everything as raw text and will safely escape HTML tags, making it highly secure against Cross-Site Scripting (XSS) attacks.

const heading = document.querySelector('h1');
heading.textContent = "Welcome to my updated application!";

innerHTML

Gets or sets the HTML markup contained within the element. Unlike textContent, this will parse and render HTML tags.

const container = document.querySelector('.container');
// This will render an actual bold tag inside the container
container.innerHTML = "This is <strong>important</strong> text.";

⚠️ Warning: Never use innerHTML with unsanitized user input, as it exposes your site to XSS vulnerabilities.

innerText

Similar to textContent, but aware of CSS styling. It will not return text that is hidden via CSS (e.g., display: none) and triggers layout reflows, making it slightly less performant than textContent.

2. Modifying Classes and Styles

classList API

The modern and recommended way to manipulate CSS classes. It provides methods to add, remove, toggle, and check for classes.

const button = document.querySelector('.btn');

button.classList.add('active');        // Adds a class
button.classList.remove('disabled');   // Removes a class
button.classList.toggle('highlighted');// Toggles a class on/off
const isActive = button.classList.contains('active'); // Returns true/false

Inline Styles

You can manipulate an element's inline CSS via the .style property. CSS properties written in kebab-case in CSS (like background-color) are converted to camelCase in JavaScript.

const box = document.querySelector('.box');

box.style.backgroundColor = "blue";
box.style.marginTop = "20px";
box.style.display = "none"; // Hides the element

3. Working with Attributes

You can read, write, and remove HTML attributes dynamically.

getAttribute() and setAttribute()

const image = document.querySelector('img');

// Reading an attribute
const src = image.getAttribute('src');

// Setting a new attribute
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'A beautiful landscape');

removeAttribute()

const input = document.querySelector('input');
input.removeAttribute('disabled'); // Re-enables the input field

4. Creating and Appending New Elements

Building the UI dynamically requires creating elements from scratch and inserting them into the DOM tree.

document.createElement()

Creates a new HTML element node. At this point, the element exists only in memory and is not yet visible on the page.

const newDiv = document.createElement('div');
newDiv.classList.add('card');
newDiv.textContent = "I am a newly created card!";

appendChild()

Appends a node as the last child of a specified parent node.

const parentContainer = document.querySelector('#app');
parentContainer.appendChild(newDiv);

append() and prepend()

• append(): Can append multiple nodes and strings simultaneously as the last children.
• prepend(): Inserts nodes or strings as the first child of the parent.

const list = document.querySelector('ul');
const firstItem = document.createElement('li');
firstItem.textContent = "First";

list.prepend(firstItem); // Added to the top of the list

5. Removing Elements

Removing elements from the DOM is straightforward in modern JavaScript.

remove()

Called directly on the element you wish to remove.

const oldAd = document.querySelector('.advertisement');
if (oldAd) {
  oldAd.remove();
}

removeChild() (Legacy)

If you need to support older browsers, you remove a child via its parent.

const parent = document.querySelector('#list');
const childToRemove = document.querySelector('#item-3');
parent.removeChild(childToRemove);

Summary

Mastering DOM manipulation—updating text (textContent), changing styles (classList), altering attributes (setAttribute), and building node structures (createElement / appendChild)—is the core mechanism behind every dynamic web interface and JavaScript framework.