✨ DOM Manipulation

Last Updated: 26th October 2025

DOM Manipulation allows you to change HTML elements dynamically using JavaScript.
You can change text, HTML, attributes, styles, classes, or even create/remove elements.

Hinglish Tip 🗣: DOM manipulation ka matlab hai website ke content ko live modify karna — jaise text change karna, button click par color change, ya naye element add karna.

🧩 Changing Text Content

textContent property allows you to change the text inside an element.

<h1 id="title">Hello World</h1>

<script>
  const heading = document.getElementById("title");
  heading.textContent = "Welcome to JS!"; // Change text
  console.log(heading.textContent); // Output: Welcome to JS!
</script>

innerHTML property allows you to insert HTML into an element.

<div id="content"></div>

<script>
  const div = document.getElementById("content");
  div.innerHTML = "<p>This is <strong>bold</strong> text</p>";
</script>

🎨 Changing Styles

style property allows you to change the style of an element.
It follows camelCase convention (e.g., backgroundColor instead of background-color).

<p id="para">Hello</p>

<script>
  const para = document.getElementById("para");
  para.style.color = "red"; // Change text color
  para.style.fontSize = "20px"; // Change font size
  para.style.backgroundColor = "yellow"; // Change background
</script>

🏷 Changing Attributes

getAttribute method allows you to get the value of an element's attribute.
setAttribute method allows you to add a new attribute to an element.
removeAttribute method allows you to remove an existing attribute from an element.

<a id="link" href="https://example.com">Visit</a>

<script>
  const link = document.getElementById("link");
  link.setAttribute("href", "https://google.com"); // Change href
  link.setAttribute("target", "_blank"); // Open in new tab
  console.log(link.getAttribute("href")); // Output: https://google.com
</script>

Creating & Adding Elements

createElement method allows you to create a new HTML element.
appendChild method allows you to add a new element to an existing element.
insertBefore method allows you to insert a new element before an existing element.

<ul id="list"></ul>

<script>
  const ul = document.getElementById("list");
  const li = document.createElement("li"); // Create li element
  li.textContent = "Item 1";
  ul.appendChild(li); // Add li to ul

  const li2 = document.createElement("li");
  li2.textContent = "Item 2";
  ul.insertBefore(li2, li); // Insert li2 before li
</script>

Removing Elements

remove() method allows you to remove an element from the DOM.
removeChild method allows you to remove an existing element from an element.

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const li = document.querySelector("li");
  li.remove(); // Remove the first li
</script>

🏷 Manipulating Classes

classList property allows you to add, remove, or toggle classes on an element.
contains method allows you to check if an element has a specific class.
add method allows you to add a new class to an element.
remove method allows you to remove an existing class from an element.
toggle method allows you to toggle the presence of a class on an element.

<p id="para" class="text">Hello</p>

<script>
  const para = document.getElementById("para");
  para.classList.add("highlight"); // Add class
  para.classList.remove("text"); // Remove class
  para.classList.toggle("active"); // Toggle class
  console.log(para.classList.contains("highlight")); // true
</script>

💡 Quick Practice

Change text of an element with ID title.
Add a new list item to an existing <ul> dynamically.
Toggle a CSS class on a <div> when clicked.
Change the href of a link to Google dynamically.

← Previous Next →