DOM Manipulation
Manipulating the DOM
innerHTML, createElement, appendChild
💡 DOM manipulation ek page ko live edit karna hai — text badalna (innerHTML/textContent), naye elements "birth" dena (createElement), unhe family tree mein jodna (appendChild) — sab kuch JavaScript se, bina page reload ke.
innerHTML element ka HTML content get/set karta hai (HTML parse hota hai — tags kaam karte hain). textContent sirf text (HTML tags parse NAHI hote, safer XSS ke against). createElement() se naya element BANAYA jaata hai (memory mein, page mein nahi abhi tak). appendChild()/append() se use DOM tree mein ACTUALLY add karte hain.
const container = document.getElementById("container");
container.innerHTML = "<p>Ye HTML hai</p>"; // HTML parse hota hai
container.textContent = "Ye plain text hai"; // HTML tags parse NAHI hote (safe)
// Naya element create + add karna:
const newDiv = document.createElement("div");
newDiv.textContent = "Main naya hoon!";
newDiv.classList.add("card");
container.appendChild(newDiv); // ab actually DOM mein add hua
// Remove karna:
newDiv.remove();✏️
DOM manipulation ek page ko live edit karna hai — text badalna (innerHTML/textContent), naye elements "birth" dena (createElement), unhe family tree mein jodna (appendChild) — sab kuch JavaScript se, bina page reload ke.
1 / 2
⚡ झट से Recap
- innerHTML = HTML parse hota hai (careful, XSS risk), textContent = safe plain text
- createElement() = naya element banao (memory mein)
- appendChild()/append() = DOM tree mein actually add karo
इस page में (2 subtopics)
classList.add()/remove()/toggle()/contains() CSS classes manage karne ka clean, modern tareeka hai — string concatenation se manually className manipulate karne se bahut better.
const box = document.querySelector(".box");
box.classList.add("active"); // class add karo
box.classList.remove("hidden"); // class hataओ
box.classList.toggle("open"); // ho to hataओ, na ho to add karo
console.log(box.classList.contains("active")); // true/false checkTip: toggle() bahut common hai interactive UI ke liye (jaise dropdown menus, accordions) — ek line mein "show/hide" logic, if-else ki zaroorat nahi.
element.style se inline CSS directly set kar sakte ho — property names camelCase mein hote hain (background-color ban jaata hai backgroundColor), CSS se alag.
const box = document.querySelector(".box");
box.style.backgroundColor = "blue"; // background-color -> backgroundColor
box.style.fontSize = "20px";
box.style.display = "none";Common Mistake: Bahut zyada inline styles JavaScript se set karna maintainability kharab karta hai — usually better approach hai CSS classes define karna (jaise .highlighted { background: blue; }) aur JavaScript se sirf classList.add("highlighted") karna.