JavaScript for Beginners: Mastering DOM Manipulation Step-by-Step

📘 Chapter 3: Changing Text, HTML, and Attributes

🚀 Introduction: Making Webpages Dynamic with JavaScript

Now that you can confidently select elements in the DOM, the next step is learning how to change what users see and interact with — this includes updating text, injecting HTML, modifying attributes, and handling content dynamically.

This chapter focuses on:

• Editing element text (textContent, innerText)
• Inserting or replacing HTML (innerHTML)
• Changing attributes like src, href, alt, placeholder
• Updating form inputs, images, and links
• Best practices and security considerations

Let’s transform static HTML into dynamic, interactive experiences.

🧠 Core Concepts Overview

📌 1. Changing Text: textContent vs innerText

🧾 Example HTML:

html

<h2 id="title">Welcome to my site</h2>

✅ JavaScript:

javascript

const title = document.getElementById('title');

title.textContent = 'Thanks for visiting!';

🔍 textContent:

• Returns all text, including hidden elements
• Faster and more consistent

🔍 innerText:

• Returns visible text only
• Affects layout reflow (slightly slower)

🧪 Compare Behavior:

🎨 2. Injecting HTML: innerHTML

innerHTML allows you to replace or add HTML markup inside an element.

🔹 Example:

html

<div id="box"></div>

javascript

const box = document.getElementById('box');

box.innerHTML = "<h3>New Heading</h3><p>This content was added with JavaScript!</p>";

⚠️ Be cautious using innerHTML with user input — it can expose your site to XSS attacks.

🔧 Use Cases for innerHTML:

• Adding buttons, images, or nested tags
• Displaying formatted API responses
• Building reusable card or table layouts

🛠️ 3. Safely Appending Content with insertAdjacentHTML()

Instead of replacing all content, you can use:

javascript

element.insertAdjacentHTML(position, htmlString);

✅ Example:

javascript

box.insertAdjacentHTML('beforeend', '<p>Another paragraph!</p>');

🌐 4. Changing Attributes with JavaScript

You can dynamically:

• Change links
• Switch image sources
• Update input fields
• Modify data-* attributes

🧾 Common Methods:

🎯 Example 1: Updating an Image Source

html

<img id="banner" src="default.jpg" alt="Banner Image">

javascript

const banner = document.getElementById('banner');

banner.setAttribute('src', 'new-banner.jpg');

banner.setAttribute('alt', 'Updated image banner');

🎯 Example 2: Dynamic Link Update

html

<a id="profileLink" href="#">Visit Profile</a>

javascript

const link = document.getElementById('profileLink');

link.setAttribute('href', 'https://linkedin.com/in/yourname');

🧾 5. Reading and Setting Form Input Values

JavaScript can read and update form inputs easily using the .value property.

html

<input type="text" id="username" placeholder="Enter name" />

🔹 Read Value:

javascript

const nameInput = document.getElementById('username');

console.log(nameInput.value); // logs user input

🔹 Set Value:

javascript

nameInput.value = "John Doe";

💡 Also works with <textarea> and <select> fields.

💡 Bonus: Accessing dataset for Custom Data

HTML5 introduced data-* attributes to store custom values.

html

<button id="deleteBtn" data-id="789">Delete</button>

javascript

const btn = document.getElementById('deleteBtn');

console.log(btn.dataset.id); // 789

✅ Very useful for working with dynamic content and APIs.

🧪 Real-World Use Case: Building a Notification Message

🔸 HTML:

html

<div id="notification" class="hidden"></div>

🔸 JavaScript:

javascript

const note = document.getElementById('notification');

function showMessage(message) {

  note.textContent = message;

  note.classList.remove('hidden');

}

🔔 This is the basic structure of alert boxes, toast messages, etc.

🧱 Comparing DOM Manipulation Methods

🧠 Common Mistakes and Fixes

🧾 Summary Table

📍 Summary: What You’ve Learned

• How to update text using .textContent and .innerText
• How to insert or replace HTML with .innerHTML and insertAdjacentHTML()
• How to work with attributes using setAttribute(), getAttribute(), etc.
• How to read and set form field values dynamically
• How to apply this knowledge to create real-world interactions

In the next chapter, you’ll learn how to style elements, add/remove CSS classes, and manipulate layout directly with JavaScript.