Manipulating Content, Attributes & Elements

Changing content

textContent sets plain text; innerHTML parses and inserts actual HTML.

const box = document.querySelector("#box");
box.textContent = "New text";
box.innerHTML = "<strong>Bold text</strong>";

Attributes & classes

classList gives clean methods for adding, removing and toggling CSS classes.

const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
link.classList.add("active");
link.classList.toggle("hidden");

Creating & removing elements

Build a node, attach it with appendChild, and detach it later with .remove().

const li = document.createElement("li");
li.textContent = "New item";
document.querySelector("ul").appendChild(li);
li.remove();

innerHTML caution

Avoid innerHTML with untrusted input — it can execute injected scripts (XSS). Prefer textContent for plain text.