JavaScript HTML DOM: Changing HTML Content

The HTML DOM (Document Object Model) allows JavaScript to dynamically interact with and modify the content of web pages. Changing HTML content is one of the most common uses of the DOM, enabling developers to create dynamic and interactive websites.

Methods to Change HTML Content

1. innerHTML

The innerHTML property allows you to set or get the HTML content inside an element.

  • Get HTML content: 
const content = document.getElementById("example").innerHTML;
console.log(content);
  • Set HTML content: 
document.getElementById("example").innerHTML = "<h2>Updated Content</h2>";

2. textContent

The textContent property changes only the text content of an element. Unlike innerHTML, it does not parse or interpret HTML tags.

  • Get text content: 
const text = document.getElementById("example").textContent;
console.log(text);
  • Set text content: 
document.getElementById("example").textContent = "This is plain text.";

3. innerText

Similar to textContent, innerText changes the visible text of an element but takes into account CSS styles (e.g., display: none).

  • Example: 
document.getElementById("example").innerText = "Visible Text Only";

4. document.write()

document.write() writes content directly to the document, often used during page load. It is generally discouraged for modern web development as it can overwrite the entire document.

  • Example: 
document.write("<p>This replaces the whole document!</p>");

5. setAttribute()

Changes specific attributes of an HTML element, such as src, href, or value.

  • Example: 
const link = document.getElementById("myLink");
link.setAttribute("href", "https://example.com");
link.textContent = "Visit Example";

Examples: Changing HTML Dynamically

Example 1: Update Paragraph Content

<p id="demo">Old content here.</p>
<button onclick="changeContent()">Click Me</button>

<script>
    function changeContent() {
        document.getElementById("demo").innerHTML = "New content has replaced the old!";
    }
</script>

Example 2: Add New HTML

<div id="container"></div>
<script>
    document.getElementById("container").innerHTML = `
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    `;
</script>

Example 3: Display User Input

<input type="text" id="inputBox" placeholder="Type something">
<button onclick="displayInput()">Submit</button>
<p id="output"></p>

<script>
    function displayInput() {
        const userInput = document.getElementById("inputBox").value;
        document.getElementById("output").textContent = `You typed: ${userInput}`;
    }
</script>

Best Practices for Changing HTML

  1. Sanitize Input:
    Always sanitize user input before inserting it into the DOM to prevent Cross-Site Scripting (XSS) attacks. 
const sanitize = (input) => input.replace(/</g, "<").replace(/>/g, ">");
  1. Minimize DOM Access:
    Accessing or modifying the DOM frequently can impact performance. Cache DOM elements when possible. 
const example = document.getElementById("example");
example.innerHTML = "Cached content update";
  1. Avoid document.write():
    It is outdated and can lead to poor user experiences.
  2. Use textContent for Plain Text:
    When inserting text, prefer textContent to avoid accidental injection of executable HTML.

Conclusion

Changing HTML content with JavaScript is a fundamental technique for building interactive websites. By mastering methods like innerHTML, textContent, and setAttribute, developers can create dynamic experiences while adhering to best practices for security and performance.

For more tutorials and coding tips, visit The Coding College.

Leave a Comment