Modifying DOM Element Content

In web development, the Document Object Model (DOM) is a tree structure generated by browsers after parsing HTML. It serves as the bridge between frontend code and webpage content; all interaction logic, style rendering, and data display ultimately achieve their goals through DOM manipulation. Modifying the content of DOM elements is one of the most fundamental yet core skills in frontend development. Whether updating text information, replacing image resources, or dynamically inserting list items, it essentially involves adding, deleting, modifying, or querying nodes within the DOM tree. Mastering this capability means developers can move beyond static pages to build interactive applications that respond to user behavior and offer real-time feedback.

Modifying Text Content Using the textContent Property

For most scenarios requiring updates to text inside an element, the most direct and efficient approach is using the element's textContent property. This property returns or sets the textual content of an element; its greatest advantage lies in security—as it automatically escapes HTML tags and special characters, effectively preventing Cross-Site Scripting (XSS) attacks.

When we need to modify text within a <p> tag, we can directly access and assign values via the DOM object:

const paragraph = document.querySelector('p');
paragraph.textContent = "This is the updated text content";

If an element originally contains complex HTML structures, using innerHTML might introduce XSS risks, whereas textContent ensures that regardless of how complex the original content was, it will only display plain text after modification. Furthermore, textContent performs excellently when updating multiple nodes in bulk because it avoids the overhead of browsers re-parsing HTML strings.

Distinguishing Between innerText, and innerHTML

Although textContent is the preferred solution, practical development requires understanding the usage scenarios and potential pitfalls associated with both innerText and innerHTML.

  • innerText: Returns the text content of an element, including text from elements hidden by CSS styles (such as display: none) but excluding attribute values or content within script tags. It also possesses XSS protection characteristics; however, it may not be as intuitive as textContent in certain complex style rendering scenarios.
  • innerHTML: Returns the HTML string content of an element. When modifying label structures contained within an element (for example, converting a paragraph into a list), this property must be used.
const list = document.querySelector('ul');
list.innerHTML = "<li>Item One</li><li>Item Two</li>";

It is important to note that when assigning via innerHTML, the browser re-parses the input string as HTML. While this provides immense flexibility, it also means that if user-supplied data is injected without filtering, security risks are highly likely. Therefore, when handling User-Generated Content (UGC), one should prioritize using textContent or manually perform HTML escaping.

Advanced Techniques for Dynamic Element Manipulation

Beyond simple property assignment, DOM manipulation involves node insertion, replacement, and deletion—foundational skills for building complex dynamic interfaces.

  1. Creating New Nodes:
    One can use the document.createElement() method to create new elements and then append them into an existing DOM tree.

    const newDiv = document.createElement('div');
newDiv.className = 'new-card';
newDiv.textContent = "This is a newly created card";
document.body.appendChild(newDiv);

  2. Node Replacement:
    When it is necessary to completely replace the content of an element, one can use the replaceWith() method. This method removes the original node and replaces it with the new node; compared to traditional parentNode.replaceChild(), it is more concise and semantically clearer.

    const oldItem = document.querySelector('.old-item');
const newItem = document.createElement('div');
newItem.className = 'new-item';
oldItem.replaceWith(newItem);

  3. Conditional Modification:
    In practical applications, content modification often involves conditional logic. By combining event listeners (Event Listeners), we can trigger updates to DOM content in real-time based on user actions such as clicks or input events.

    const button = document.getElementById('submit-btn');
button.addEventListener('click', function() {
    const messageEl = document.getElementById('status-msg');
    if (messageEl) {
        messageEl.textContent = "Operation successful!";
        setTimeout(() => {
            messageEl.style.color = 'green';
        }, 100);
    }
});

Performance Optimization and Best Practices

In scenarios involving large-scale data or high-frequency updates, frequent DOM modifications can impact page rendering performance. The browser triggers a Reflow (重排) and Repaint (重绘) every time the DOM changes, leading to unnecessary computational overhead.

To optimize performance, it is recommended to adhere to the following principles:

  • Batch Operations: If you need to update multiple elements' content within a short timeframe, collect them together and execute them uniformly within a single event loop cycle to avoid triggering multiple browser rendering cycles.
  • Minimize Changes: Modify only necessary properties; do not change an element's styles or structure all at once.
  • Use Virtual Lists: In cases with large data volumes (such as long lists), consider using virtual scrolling technology, which renders only the DOM nodes within the current viewport to reduce the size of the DOM tree and operation frequency.

By mastering textContent, innerHTML, and various node manipulation methods, developers can efficiently and securely control webpage content, laying a solid foundation for building modern web applications rich in interactivity.