Manipulating DOM Elements

Checking access...

Once you’ve selected an element, you can change its content, appearance, structure, and behaviour. This page covers all the ways to manipulate the DOM.

Reading and Changing Content

textContent

Gets or sets the text content of an element (all child text, no HTML parsing):

1
<p id="message">Hello, <strong>world</strong>!</p>

1
const p = document.getElementById("message");
2

3
// Read
4
console.log(p.textContent); // "Hello, world!" (no HTML tags)
5

6
// Write
7
p.textContent = "Goodbye!";
8
// <p id="message">Goodbye!</p> — any HTML in the string is escaped

textContent is safe — it automatically escapes HTML tags, preventing XSS attacks.

innerHTML

Gets or sets the HTML content inside an element:

1
const div = document.querySelector(".content");
2

3
// Read
4
console.log(div.innerHTML); // includes all HTML tags inside
5

6
// Write — parses HTML string
7
div.innerHTML = "<p>New <strong>content</strong></p>";
8

9
// Append
10
div.innerHTML += "<p>Added paragraph</p>";

Danger

innerHTML with user-supplied data is a security risk. If a user types <img src=x onerror=alert('XSS')>, the script executes. Always use textContent for text, or sanitize input before using innerHTML.

innerText (vs textContent)

1
<p id="test" style="display: none;">Hidden text</p>

1
const p = document.getElementById("test");
2

3
console.log(p.textContent); // "Hidden text" — includes hidden text
4
console.log(p.innerText);   // "" — respects CSS visibility, triggers layout

Prefer textContent — it’s faster and doesn’t trigger layout recalculations.

Working with Attributes

Standard Attributes

1
<a id="link" href="https://example.com" target="_blank" class="external">Link</a>

1
const link = document.getElementById("link");
2

3
// Get attribute
4
console.log(link.getAttribute("href")); // "https://example.com"
5
console.log(link.href); // Full URL (property normalisation)
6

7
// Set attribute
8
link.setAttribute("target", "_self");
9
link.href = "https://other.com";
10

11
// Check existence
12
console.log(link.hasAttribute("target")); // true
13

14
// Remove attribute
15
link.removeAttribute("target");

Data Attributes

1
<button data-user-id="123" data-role="admin" data-active="true">Edit</button>

1
const btn = document.querySelector("button");
2

3
// Read via dataset (camelCase)
4
console.log(btn.dataset.userId); // "123"
5
console.log(btn.dataset.role);   // "admin"
6
console.log(btn.dataset.active); // "true" (always string)
7

8
// Write
9
btn.dataset.userId = "456";
10
btn.dataset.newAttr = "value"; // creates data-new-attr
11

12
// Check
13
console.log(btn.hasAttribute("data-user-id")); // true

Manipulating Classes

1
<div id="box" class="card large">Content</div>

1
const box = document.getElementById("box");
2

3
// Add class
4
box.classList.add("highlight");
5

6
// Remove class
7
box.classList.remove("large");
8

9
// Toggle (add if missing, remove if present)
10
box.classList.toggle("active");
11

12
// Replace
13
box.classList.replace("card", "panel");
14

15
// Check
16
console.log(box.classList.contains("highlight")); // true
17

18
// Multiple classes
19
box.classList.add("visible", "animated", "fade-in");

Changing Styles

Inline Styles (style property)

1
const el = document.querySelector(".element");
2

3
// Individual properties (camelCase)
4
el.style.backgroundColor = "blue";
5
el.style.fontSize = "16px";
6
el.style.marginTop = "20px";
7
el.style.display = "flex";
8

9
// CSS custom properties
10
el.style.setProperty("--main-color", "red");
11

12
// Remove inline style
13
el.style.removeProperty("margin-top");
14

15
// Read computed style
16
const computed = getComputedStyle(el);
17
console.log(computed.backgroundColor);

Better: Use CSS Classes

Instead of inline styles, toggle classes:

1
// ❌ Avoid
2
el.style.color = "red";
3
el.style.fontWeight = "bold";
4

5
// ✅ Prefer
6
el.classList.add("error-state"); // defined in CSS

.error-state {
  color: red;
  font-weight: bold;
}

Creating and Inserting Elements

createElement + appendChild

1
// Create elements
2
const div = document.createElement("div");
3
const p = document.createElement("p");
4
const strong = document.createElement("strong");
5

6
// Set content
7
p.textContent = "This is a paragraph";
8
strong.textContent = "bold text";
9

10
// Build tree
11
p.appendChild(strong);
12
div.appendChild(p);
13

14
// Insert into document
15
document.body.appendChild(div);

Modern Insertion Methods

1
const parent = document.querySelector(".list");
2

3
// Append at end
4
parent.append(newElement); // can append multiple: parent.append(el1, el2)
5

6
// Prepend at beginning
7
parent.prepend(newElement);
8

9
// Insert before a reference element
10
parent.insertBefore(newElement, referenceElement);
11

12
// Insert adjacent HTML
13
const target = document.querySelector(".target");
14
target.insertAdjacentHTML("beforebegin", "<p>Before</p>");
15
target.insertAdjacentHTML("afterbegin", "<p>First child</p>");
16
target.insertAdjacentHTML("beforeend", "<p>Last child</p>");
17
target.insertAdjacentHTML("afterend", "<p>After</p>");

1
<!-- beforebegin -->
2
<div class="target">
3
  <!-- afterbegin -->
4
  existing content...
5
  <!-- beforeend -->
6
</div>
7
<!-- afterend -->

Replace and Remove

1
// Replace
2
oldElement.replaceWith(newElement);
3

4
// Remove
5
element.remove(); // modern
6
parent.removeChild(child); // legacy
7

8
// Clear all children
9
element.innerHTML = "";
10
// or
11
while (element.firstChild) {
12
  element.removeChild(element.firstChild);
13
}

Document Fragments

For bulk operations, use a DocumentFragment to avoid multiple reflows:

1
// ❌ Bad — triggers reflow on each append
2
const list = document.getElementById("list");
3
for (let i = 0; i < 1000; i++) {
4
  const li = document.createElement("li");
5
  li.textContent = `Item ${i}`;
6
  list.appendChild(li); // reflow every time!
7
}
8

9
// ✅ Good — single reflow
10
const fragment = document.createDocumentFragment();
11
for (let i = 0; i < 1000; i++) {
12
  const li = document.createElement("li");
13
  li.textContent = `Item ${i}`;
14
  fragment.appendChild(li);
15
}
16
list.appendChild(fragment); // single reflow

Clone Nodes

1
const original = document.querySelector(".card");
2

3
// Shallow clone — copies element but NOT children
4
const shallow = original.cloneNode(false);
5

6
// Deep clone — copies element AND all children
7
const deep = original.cloneNode(true);

Checking and Comparing Elements

1
// Check if element is in the DOM
2
console.log(document.contains(element)); // true/false
3

4
// Check if element contains another
5
console.log(parent.contains(child)); // true/false
6

7
// Compare elements
8
console.log(element1 === element2);
9
console.log(element1.isEqualNode(element2)); // deep equality
10
console.log(element1.isSameNode(element2));  // same reference

Quick Reference

Operation	Method
Get/Set text	`element.textContent`
Get/Set HTML	`element.innerHTML`
Add class	`element.classList.add("cls")`
Remove class	`element.classList.remove("cls")`
Toggle class	`element.classList.toggle("cls")`
Set attribute	`element.setAttribute("k", "v")`
Get attribute	`element.getAttribute("k")`
Data attribute	`element.dataset.key`
Set style	`element.style.prop = "value"`
Create element	`document.createElement("tag")`
Append child	`parent.append(child)`
Remove	`element.remove()`
Clone	`element.cloneNode(deep)`

Practice Exercises

Build a list generator: Create a page with a text input and a button. When clicked, add the input text as a new <li> to a <ul>. Include a “Clear All” button that removes all items.
Data attribute reader: Create several <div> elements with data-info attributes. Write a script that reads all data attributes and displays them in a table.
Class toggle demo: Create a <div> that changes appearance when a button toggles an .active class. Use classList.toggle() and define the styles in CSS.