innerHTML vs innerText

In web development, understanding the distinction between innerHTML and innerText is crucial. Both are properties used to manipulate the content of HTML elements, but they have distinct behaviors and use cases. Let's delve into each method, their differences, and provide illustrative examples.

innerHTML

The innerHTML property allows you to get or set the HTML content within an element. It represents the HTML markup contained within the element, including any child elements, text, and tags. When setting innerHTML, the existing content of the element is replaced with the new HTML content specified.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML Example</title>
</head>
<body>
    <div id="exampleDiv">
        <p>This is a paragraph.</p>
    </div>

    <script>
        // Getting the innerHTML of the element
        const exampleDiv = document.getElementById('exampleDiv');
        console.log(exampleDiv.innerHTML); // Output: <p>This is a paragraph.</p>

        // Setting the innerHTML of the element
        exampleDiv.innerHTML = '<p>New content!</p>';
    </script>
</body>
</html>

In this example, the content of the exampleDiv element is initially <p>This is a paragraph.</p>. Using innerHTML, we can change this content to <p>New content!</p>.

innerText

Unlike innerHTML, the innerText property retrieves or sets the text content of the specified element and its descendants. It returns the visible text content of an element while disregarding any HTML tags within it. When setting innerText, it replaces the content of the element with the provided text.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerText Example</title>
</head>
<body>
    <div id="exampleDiv">
        <p>This is a <span>paragraph</span>.</p>
    </div>

    <script>
        // Getting the innerText of the element
        const exampleDiv = document.getElementById('exampleDiv');
        console.log(exampleDiv.innerText); // Output: This is a paragraph.

        // Setting the innerText of the element
        exampleDiv.innerText = 'New text content!';
    </script>
</body>
</html>

In this example, the exampleDiv initially contains the text "This is a paragraph.". Using innerText, we replace this text with "New text content!".

Differences:

  1. Content Handling:

    • innerHTML treats content as HTML markup, including tags.

    • innerText treats content purely as text, disregarding HTML tags.

  2. Performance:

    • innerText may offer better performance since it does not involve parsing or rendering HTML tags.

  3. Accessibility:

    • innerText might be preferable for accessibility purposes as it provides a cleaner representation of text content.

  4. Usage:

    • Use innerHTML when dealing with HTML content manipulation.

    • Use innerText when working specifically with text content and ignoring HTML markup.

Understanding the distinction between innerHTML and innerText is essential for effective web development and ensures proper handling of HTML content based on specific requirements.

PrevioussetAttribute()Nextappend() vs appendChild()