Modifying Elements: JavaScript DOM Manipulation

6/22/2025

JavaScript DOM tree structure

Go Back
JavaScript DOM tree structure

Modifying Elements: JavaScript DOM Manipulation

Introduction

When building interactive web applications, modifying elements on the page dynamically is a core capability of JavaScript. The Document Object Model (DOM) provides a structured representation of a web page, allowing developers to access and manipulate HTML elements through JavaScript. In this article, we’ll explore how to modify DOM elements — changing their content, attributes, styles, and even structure.
 

Why DOM Manipulation Is Important

DOM manipulation empowers developers to:

  • Create dynamic content (e.g., live updates)

  • Improve user interactions (e.g., forms and modals)

  • Alter appearance and structure without reloading the page

  • Build single-page applications (SPAs)
     

1. Changing the Content of Elements

You can change the inner content of an element using:

// Get the element
const title = document.getElementById("heading");

// Change the content
title.innerHTML = "New Heading Text";

Methods to modify content:

  • innerHTML – sets or returns the HTML inside an element

  • textContent – sets or returns only the text

  • innerText – similar to textContent but more browser-specific
     

2. Updating Element Attributes

To change an attribute like src, href, or alt, use:

const image = document.querySelector("img");

// Change the image source
image.setAttribute("src", "new-image.jpg");

// Update the alt text
image.alt = "Updated image description";

Common methods:

  • getAttribute(attributeName)

  • setAttribute(attributeName, value)

  • removeAttribute(attributeName)
     

3. Modifying Styles Dynamically

Using the .style property, you can directly alter CSS styles:

const button = document.querySelector(".submit-btn");

// Change background and font size
button.style.backgroundColor = "green";
button.style.fontSize = "18px";

For multiple styles, consider adding or removing CSS classes instead:

button.classList.add("active");
button.classList.remove("disabled");

4. Inserting New Elements

You can create and append new elements dynamically:

const newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph.";

const container = document.getElementById("content");
container.appendChild(newPara);

Other useful methods:

  • appendChild()

  • insertBefore()

  • replaceChild()

  • innerHTML += ... (not recommended for large DOM trees)
     

5. Removing Elements

To remove an element from the DOM:

const unwanted = document.getElementById("remove-me");
unwanted.remove();

Or for older browsers:

unwanted.parentNode.removeChild(unwanted);

6. Modifying Classes and IDs

Change or update the class and ID of elements:

const box = document.querySelector(".box");

// Change ID
box.id = "new-id";

// Add or remove class
box.classList.add("highlight");
box.classList.remove("shadow");


Real-World Example

<button onclick="toggleMode()">Toggle Dark Mode</button>

<script>
function toggleMode() {
  document.body.classList.toggle("dark-mode");
}
</script>

Here, we modify the class of the <body> to switch between light and dark themes dynamically.

Conclusion

Modifying DOM elements using JavaScript is essential for creating interactive and dynamic user interfaces. From changing content to updating styles or attributes, mastering DOM manipulation allows developers to build rich web experiences. Keep experimenting with various DOM methods to become a more effective front-end developer.
In other word ,
Modifying elements in JavaScript DOM manipulation involves changing the content, attributes, or styles of HTML elements after they have been loaded into the Document Object Model. This allows for dynamic and interactive web pages.
 

FAQs

Q: What is the safest way to change inner content of an element?
A: Use textContent if you're inserting plain text to avoid security issues like XSS.

Q: How do I check if an element has a certain class?
A: Use element.classList.contains("className").

Q: Can I use jQuery for DOM manipulation instead?
A: Yes, but modern JavaScript (ES6+) supports native DOM methods which are efficient and widely supported.

Table of content