DOM Manipulation: textContent and innerHTML

Once you've selected an element in the DOM, one of the most common manipulations you'll perform is changing its content. JavaScript provides two primary properties for this purpose: textContent and innerHTML. While they both modify the content, they do so in fundamentally different ways, with important implications for security and performance.

1. textContent Property

The textContent property allows you to get or set the textual content of a specified node and all its descendants. When you set textContent, any HTML tags within the string you provide will be treated as plain text and will not be rendered as HTML.

• Purpose: To work purely with the text content of an element, ignoring any HTML markup.
• Safe: Automatically escapes any HTML characters, making it safe from Cross-Site Scripting (XSS) attacks when inserting user-generated content.
• Performance: Generally performs better than innerHTML when only text is involved, as it doesn't need to parse HTML.
• Syntax: element.textContent = 'new text'; or let text = element.textContent;

2. innerHTML Property

The innerHTML property allows you to get or set the HTML content (including tags and text) of an element. When you set innerHTML, the string you provide is parsed by the browser as HTML, and the resulting elements are inserted into the DOM.

• Purpose: To insert or retrieve HTML markup within an element. Useful for dynamically building complex HTML structures.
• Powerful but Risky: Because it parses HTML, it's susceptible to Cross-Site Scripting (XSS) attacks if you use it to insert unvalidated user-generated content. Malicious scripts can be injected and executed.
• Performance: Can be slower than textContent for pure text manipulation because it involves the browser's HTML parser.
• Syntax: element.innerHTML = '<h2>New HTML</h2>'; or let html = element.innerHTML;

3. When to Use Which?

The choice between textContent and innerHTML depends on your needs:

• Use textContent when:

  • You only need to retrieve or set plain text content.
  • You are inserting data that might come from an untrusted source (like user input) to prevent XSS attacks.
  • Performance is critical for text-only updates.

• Use innerHTML when:

  • You need to insert or retrieve HTML markup.
  • You are generating dynamic HTML from trusted sources (e.g., templates, your own static data).
  • You understand and have mitigated the XSS risks if using untrusted input.

General Rule: Prefer textContent by default if you don't need to render HTML. If you must render HTML, ensure the source is trusted or properly sanitized before using innerHTML.

Exercise: Content Manipulation

Instructions: Given the following HTML structure, perform the specified content manipulations using textContent and innerHTML.

<div id="displayArea">
  <p>Initial content here.</p>
</div>

<div id="dynamicList">
  </div>

<input type="text" id="userInputField" value="<p>Hello from <b>Input</b>!</p>">
<button id="updateButton">Update Display Area</button>

Your Task:

1. Select the div with id="displayArea".
2. Change its content using textContent to: "This is new plain text." Log the outerHTML of displayArea after this.
3. Select the div with id="dynamicList".
4. Using innerHTML, add three list items (<li>) with dummy content (e.g., "Item 1", "Item 2", "Item 3"). Log the innerHTML of dynamicList after this.
5. Set up an event listener for the updateButton. When clicked:
   • Get the value from userInputField.
   • Set the innerHTML of displayArea to this user input.
   • Observe: Notice how the browser renders the HTML from the input field. (In a real application, you would sanitize userInput before using innerHTML).