JavaScript Modifying Elements

const el = document.querySelector(".card");

// textContent — plain text (SAFE):
el.textContent = "Hello, World!";
el.textContent; // reads all text, ignores HTML tags

// innerHTML — parses HTML (DANGEROUS with user input):
el.innerHTML = "<strong>Bold</strong> text";
el.innerHTML; // returns HTML string including tags

// innerText — visible text only (respects CSS):
el.innerText; // ignores hidden elements, adds newlines

// outerHTML — includes the element itself:
el.outerHTML; // "<div class='card'><strong>Bold</strong> text</div>"

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

// Standard attributes map to properties:
link.href;          // full URL
link.id;            // id attribute
link.className;     // class attribute (string)

// getAttribute / setAttribute for any attribute:
link.getAttribute("href");       // exactly as written in HTML
link.setAttribute("target", "_blank");
link.removeAttribute("title");
link.hasAttribute("rel");        // true/false

// data-* attributes (custom data):
// <div data-user-id="42" data-role="admin">
const el = document.querySelector("[data-user-id]");
el.dataset.userId;   // "42" (camelCase!)
el.dataset.role;     // "admin"
el.dataset.newProp = "value"; // adds data-new-prop

const el = document.querySelector(".card");

// classList (preferred for classes):
el.classList.add("active", "visible");    // add one or more
el.classList.remove("hidden");            // remove
el.classList.toggle("open");              // add if missing, remove if present
el.classList.toggle("dark", isDark);      // force add/remove
el.classList.contains("active");          // true/false
el.classList.replace("old", "new");       // swap

// Inline styles:
el.style.color = "red";
el.style.backgroundColor = "blue";       // camelCase!
el.style.transform = "rotate(45deg)";
el.style.cssText = "color: red; font-size: 16px"; // all at once

// Read computed (final) styles:
const styles = getComputedStyle(el);
styles.color;      // "rgb(255, 0, 0)"
styles.fontSize;   // "16px"

const parent = document.querySelector(".list");
const newEl = document.createElement("li");
newEl.textContent = "New item";

// Append (add as last child):
parent.appendChild(newEl);
parent.append(newEl, "text", anotherEl); // multiple!

// Prepend (add as first child):
parent.prepend(newEl);

// Insert relative to an element:
const ref = document.querySelector(".target");
ref.before(newEl);    // insert before target
ref.after(newEl);     // insert after target

// Insert at specific position:
parent.insertBefore(newEl, ref); // before ref

// Replace:
parent.replaceChild(newEl, oldEl);
oldEl.replaceWith(newEl); // modern

// Remove:
newEl.remove();                    // modern
parent.removeChild(newEl);         // legacy

// Clone:
const clone = newEl.cloneNode(true);  // deep (with children)
const shallow = newEl.cloneNode(false); // shallow (no children)