Modifying Content and Attributes in JavaScript

Introduction to Modifying DOM Content and Attributes

One of the most common tasks in JavaScript is to modify the content and attributes of DOM elements dynamically. This is useful for updating UI based on user actions, API data, or logic in your code.

Modifying Element Content using innerText and innerHTML

The two most used properties for changing content are innerText and innerHTML. Both let you read or write the content inside an element, but with key differences.

Example 1: Using innerText to Change Text

const heading = document.createElement("h1");
heading.innerText = "Welcome to JavaScript!";
console.log(heading.innerText); // Logs: Welcome to JavaScript!

heading.innerText = "Text has been changed!";
console.log(heading.innerText); // Logs: Text has been changed!
    

Output:

Welcome to JavaScript!
Text has been changed!
    

Question:

What happens if the element contains HTML tags in its content?

Answer:

innerText will show it as plain text, while innerHTML will parse it as HTML.

Example 2: Using innerHTML to Insert HTML

const div = document.createElement("div");
div.innerHTML = "<strong>Bold Text</strong>";
console.log(div.innerText);  // Output: Bold Text
console.log(div.innerHTML);  // Output: Bold Text
    

Output:

Bold Text
Bold Text
    

Modifying Attributes using setAttribute and getAttribute

You can read or change any HTML attribute (like id, class, src, etc.) using getAttribute and setAttribute.

Example 3: Changing the id of an Element

const para = document.createElement("p");
para.innerText = "This is a paragraph.";
para.setAttribute("id", "main-text");

console.log(para.getAttribute("id")); // Logs: main-text

para.setAttribute("id", "new-text");
console.log(para.getAttribute("id")); // Logs: new-text
    

Output:

main-text
new-text
    

Modifying Class Names Dynamically

You can also add, remove, or change class names using className or classList API.

Example 4: Using classList to Toggle Classes

const box = document.createElement("div");

// Initially no class
console.log(box.className); // ""

box.classList.add("highlighted");
console.log(box.className); // "highlighted"

box.classList.toggle("highlighted"); // Removes the class
console.log(box.className); // ""
    

Output:

""
"highlighted"
""
    

Modifying Styles with JavaScript

Inline styles can be modified using the style property directly from JavaScript.

Example 5: Changing Color and Font Size

const span = document.createElement("span");
span.innerText = "Styled Text";

span.style.color = "blue";
span.style.fontSize = "20px";

console.log(span.style.color);      // blue
console.log(span.style.fontSize);  // 20px
    

Output:

blue
20px
    

Summary: When to Use What?

• innerText: Use for reading or writing plain text.
• innerHTML: Use when working with HTML markup.
• setAttribute/getAttribute: Use for general attribute manipulation.
• classList: Preferred for handling classes dynamically.
• style: Direct manipulation of inline styles.

Quick Questions to Build Intuition

Q: What happens if I use innerHTML to insert a <script> tag?

A: It will appear in the DOM but may not execute depending on the browser's security model.

Q: Can I use dot notation instead of setAttribute?

A: Yes, for some attributes like id or href, but setAttribute is more flexible.