Change Element Text
Change the text content of an HTML element.
DOM text manipulation is fundamental to dynamic web pages. This exercise teaches you the right way to change element content while avoiding common security pitfalls like XSS attacks.
📚 Concepts & Theory
Changing element text content is one of the most basic DOM manipulation operations. JavaScript provides several properties for modifying text, each with different behaviors.
Understanding Text Properties:
1. textContent (Recommended)
Gets/sets the text content, treats everything as text:
element.textContent = "Hello World";
// Sets plain text, escapes HTML2. innerHTML
Gets/sets HTML content:
element.innerHTML = "<strong>Bold</strong>";
// Parses and renders HTML3. innerText
Similar to textContent but respects CSS styling:
element.innerText = "Visible text";
// Considers display:none, white-space, etc.Key Differences:
const div = document.querySelector("div");
// textContent - gets ALL text, including hidden
div.textContent; // Gets all text content
// innerText - only visible text
div.innerText; // Respects CSS (display:none)
// innerHTML - includes HTML tags
div.innerHTML; // Returns HTML string
Security Considerations:
// ❌ DANGEROUS - XSS vulnerable
element.innerHTML = userInput;
// ✅ SAFE - escapes HTML
element.textContent = userInput;
When to Use Each:
textContent:
- Setting plain text ✅
- Performance critical ✅
- Security sensitive ✅
- Don't need HTML formatting ✅
- Need to render HTML markup
- Building complex structures
- Risk: XSS attacks if using user input
- Need to respect CSS visibility
- Rarely necessary (prefer textContent)
- Drawback: Performance impact
textContent is fastest (doesn't parse HTML or compute styles)
🎯 Your Challenge
Write code to change the heading text to \"Hello DOM\".
📝 Starter Code
// HTML: <h1 id="title">Original</h1>
function changeText() {
// Your code here
}- Use getElementById() to select the element
- The textContent property changes element text
- Simply assign the new text: element.textContent = newText
- textContent is safer than innerHTML for plain text
- Don't forget to return or use the modified element
Solution
function changeText() {
const heading = document.getElementById('title');
heading.textContent = 'Hello DOM';
}
changeText();Explanation
This solution uses getElementById() to select an element by its ID, then sets the textContent property to change its text. textContent is preferred over innerHTML for plain text because: 1) it's faster (no HTML parsing), 2) it's secure (automatically escapes HTML, preventing XSS attacks), 3) it gets/sets all text including hidden elements. The assignment operator (=) replaces all existing content with the new text. Time complexity: O(1) for selection and assignment.
⚠️ Common Mistakes to Avoid
- Using innerHTML for plain text (security risk and slower)
- Forgetting that textContent escapes HTML characters
- Not checking if element exists before changing text
- Confusing textContent with value (value is for form inputs)
- Using innerText unnecessarily (performance impact)