Phase 10 — DOM (Very Important)

Module 35 — Working with DOM Content

Modern web applications constantly update page content without reloading the browser. JavaScript provides several properties to read and modify an element's content, HTML structure, and form values.

These properties are commonly used in:

• Forms
• Chat Applications
• Dashboards
• Todo Apps
• E-commerce Websites
• Live Search
• Admin Panels

Overview

innerHTML

innerHTML returns or changes the HTML inside an element.

HTML

htmlCopy
1<div id="box">
2
3    <h2>JavaScript</h2>
4
5</div>

JavaScript

javascriptCopy
1const box = document.getElementById("box");
2
3console.log(box.innerHTML);

Output

htmlCopy
1<h2>JavaScript</h2>

Update HTML

javascriptCopy
1box.innerHTML = `
2<h2>DOM Tutorial</h2>
3<p>Learning JavaScript</p>
4`;

outerHTML

outerHTML returns or replaces the entire element, including the element itself.

javascriptCopy
1const heading = document.querySelector("h2");
2
3console.log(heading.outerHTML);

Output

htmlCopy
1<h2>DOM Tutorial</h2>

Replace Element

javascriptCopy
1heading.outerHTML = "<h1>Modern JavaScript</h1>";

innerText

innerText returns only the visible text.

HTML

htmlCopy
1<div id="demo">
2
3Hello
4
5<span style="display:none">
6
7Hidden
8
9</span>
10
11</div>

javascriptCopy
1const demo = document.getElementById("demo");
2
3console.log(demo.innerText);

Output

textCopy
1Hello

textContent

textContent returns all text, including hidden text.

javascriptCopy
1console.log(demo.textContent);

Output

textCopy
1Hello Hidden

innerText vs textContent

value

The value property is used with form elements.

HTML

htmlCopy
1<input
2
3type="text"
4
5id="username"
6
7value="Ankit">

JavaScript

javascriptCopy
1const input = document.getElementById("username");
2
3console.log(input.value);

Output

textCopy
1Ankit

Update Value

javascriptCopy
1input.value = "JavaScript";

checked

Used with checkboxes and radio buttons.

HTML

htmlCopy
1<input
2
3type="checkbox"
4
5id="agree">

JavaScript

javascriptCopy
1const checkbox = document.getElementById("agree");
2
3console.log(checkbox.checked);

Output

textCopy
1false

Check the Box

javascriptCopy
1checkbox.checked = true;

selected

Used with <option> elements inside a <select>.

HTML

htmlCopy
1<select id="language">
2
3<option>Python</option>
4
5<option selected>
6
7JavaScript
8
9</option>
10
11<option>Java</option>
12
13</select>

JavaScript

javascriptCopy
1const option = document.querySelector("option");
2
3console.log(option.selected);

Select an Option

javascriptCopy
1option.selected = true;

Practical Example

HTML

htmlCopy
1<input id="name">
2
3<button id="btn">
4
5Show
6
7</button>
8
9<p id="result"></p>

JavaScript

javascriptCopy
1const input = document.getElementById("name");
2
3const button = document.getElementById("btn");
4
5const result = document.getElementById("result");
6
7button.addEventListener("click", () => {
8
9    result.textContent = input.value;
10
11});

Real-World Example — Terms & Conditions

htmlCopy
1<input
2
3type="checkbox"
4
5id="accept">
6
7<button id="submit">
8
9Submit
10
11</button>

javascriptCopy
1const accept = document.getElementById("accept");
2
3const submit = document.getElementById("submit");
4
5submit.disabled = !accept.checked;
6
7accept.addEventListener("change", () => {
8
9    submit.disabled = !accept.checked;
10
11});

Mini Project — Live Character Counter

HTML

htmlCopy
1<textarea id="message"></textarea>
2
3<p>
4
5Characters:
6
7<span id="count">
8
90
10
11</span>
12
13</p>

JavaScript

javascriptCopy
1const textarea = document.getElementById("message");
2
3const counter = document.getElementById("count");
4
5textarea.addEventListener("input", () => {
6
7    counter.textContent = textarea.value.length;
8
9});

Common Mistakes

Using innerHTML for Plain Text

❌ Wrong

javascriptCopy
1paragraph.innerHTML = userInput;

This can introduce Cross-Site Scripting (XSS) vulnerabilities if userInput contains malicious HTML.

✅ Better

javascriptCopy
1paragraph.textContent = userInput;

Confusing innerText and textContent

Use:

• innerText when you only need visible text.
• textContent when you need all text and better performance.

Reading value from Non-Form Elements

The value property works with form controls such as <input>, <textarea>, and <select>. For regular elements like <div> or <p>, use textContent or innerText.

Best Practices

• Use textContent when displaying plain text from users.
• Use innerHTML only when inserting trusted HTML content.
• Use value to read and update form fields.
• Check checked before processing checkbox or radio button input.
• Use selected or select.value to manage dropdown selections.
• Avoid replacing large HTML blocks with innerHTML repeatedly, as it can impact performance and remove existing event listeners.

Interview Questions

Q1. What is the difference between innerHTML and textContent?

• innerHTML reads or writes HTML markup.
• textContent reads or writes plain text without interpreting HTML.

Q2. What is the difference between innerText and textContent?

• innerText returns only visible text and is affected by CSS.
• textContent returns all text, including hidden content, and is generally faster.

Q3. What does the value property do?

It gets or sets the current value of form controls such as text inputs, textareas, and select elements.

Q4. When should you use checked?

Use it to determine or update the checked state of checkboxes and radio buttons.

Q5. What is outerHTML?

outerHTML returns the HTML of the element itself (including its children) and can replace the entire element when assigned a new value.

Summary

In this module, you learned how to read and update DOM content using innerHTML, outerHTML, innerText, textContent, value, checked, and selected. These properties are essential for building interactive forms, dynamic interfaces, and real-time web applications while understanding the differences between HTML content, visible text, and form state.

Next Module: Module 36 — DOM Styling, where you'll learn style, cssText, getComputedStyle(), CSS custom properties, element dimensions, visibility, and responsive styling techniques used in professional frontend development.