JavaScript — Changing HTML

JavaScript can read and rewrite the content, attributes, and structure of any HTML element through the DOM. This chapter covers the most important properties and methods for changing a page dynamically.

innerHTML, textContent, and innerText

These three properties read or set an element's content. innerHTML works with HTML markup, textContent with raw text (ignoring HTML), and innerText with the rendered (visible) text.

Reading and Setting Content

const el = document.getElementById("demo");

// innerHTML — parses HTML tags
el.innerHTML = "<strong>Bold</strong> text";
console.log(el.innerHTML); // <strong>Bold</strong> text

// textContent — raw text, no HTML parsing
console.log(el.textContent); // Bold text

// innerText — visible text (respects CSS display:none)
console.log(el.innerText);   // Bold text

📝 Note: Avoid innerHTML with user-supplied data — it can introduce XSS vulnerabilities. Use textContent when you only need to set plain text.

Getting and Setting Attributes

getAttribute() reads any HTML attribute, and setAttribute() creates or updates one. You can also remove attributes with removeAttribute().

Attribute Methods

const link = document.querySelector("a");

// Read an attribute
console.log(link.getAttribute("href"));

// Set / update an attribute
link.setAttribute("target", "_blank");
console.log(link.getAttribute("target")); // _blank

// Remove an attribute
link.removeAttribute("target");
console.log(link.getAttribute("target")); // null

Creating and Appending Elements

document.createElement() builds a new element in memory. You must then insert it into the DOM with methods like appendChild() or append().

Create and Append

// Create a new <li> element
const li = document.createElement("li");
li.textContent = "New item";

// Append it to an existing <ul>
const list = document.getElementById("myList");
list.appendChild(li);

console.log(list.children.length); // increased by 1
console.log(list.lastElementChild.textContent); // New item

Removing and Replacing Elements

removeChild() detaches a child node from its parent. replaceChild() swaps an existing child for a new node. Modern browsers also support remove() directly on an element.

Remove and Replace

const list = document.getElementById("myList");

// Remove the first child element
const removed = list.removeChild(list.firstElementChild);
console.log("Removed:", removed.textContent);

// Replace the new first child with a fresh element
const replacement = document.createElement("li");
replacement.textContent = "Replaced item";
list.replaceChild(replacement, list.firstElementChild);
console.log(list.firstElementChild.textContent); // Replaced item

// Modern: element.remove()
replacement.remove();
console.log(list.children.length);

insertBefore()

insertBefore() inserts a new node before a specified reference node inside a parent. If the reference is null it behaves like appendChild().

Inserting Before a Reference

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Inserted item";

// Insert before the second child
const ref = list.children[1];
list.insertBefore(newItem, ref);

// Log all items
for (const child of list.children) {
  console.log(child.textContent);
}

Method / Property	Purpose
innerHTML	Get or set HTML content (parses tags)
textContent	Get or set raw text content (no HTML)
innerText	Get or set visible (rendered) text
setAttribute(n, v)	Create or update attribute n to value v
getAttribute(n)	Read the value of attribute n
createElement(tag)	Create a new element in memory
appendChild(node)	Append a child to the end
removeChild(node)	Remove a child from the parent
replaceChild(new, old)	Replace old child with new node
insertBefore(new, ref)	Insert new node before ref node

Exercise:

Which property sets content as plain text without parsing HTML tags?

innerHTMLtextContentinnerTextouterHTML

❮ JS DOM Elements JS Changing CSS ❯