codeswithpankaj

JS innerText property

JavaScript DOM (Document Object Model) - innerText Property Tutorial

Table of Contents

  1. Introduction to the JavaScript DOM

  2. What is the innerText Property?

  3. Syntax of innerText

  4. Accessing and Modifying Text with innerText

  5. Practical Examples

    • Changing Text Content

    • Removing HTML Tags

    • Dynamically Updating Text

    • Handling Line Breaks

  6. Differences Between innerText and innerHTML

  7. Limitations of innerText

  8. Conclusion

1. Introduction to the JavaScript DOM

Welcome to the Codes with Pankaj tutorial on the JavaScript DOM (Document Object Model) and the innerText property! In this tutorial, we'll explore how to use the innerText property to access and modify the text content of HTML elements. Let’s dive in!

The DOM allows JavaScript to interact with the structure of a webpage, enabling dynamic content updates and user interaction. The innerText property is specifically designed to work with the visible text within an element, ignoring any HTML tags.

2. What is the innerText Property?

The innerText property represents the text content of an element and its descendants. Unlike innerHTML, which returns all the HTML within an element, innerText returns only the visible text, excluding any HTML tags.

With innerText, you can manipulate the text content of an element while preserving the structure of your HTML.

3. Syntax of innerText

element.innerText;

  • To get the text content of an element:

    let text = element.innerText;

  • To set or modify the text content of an element:

    element.innerText = "New text content";

4. Accessing and Modifying Text with innerText

Getting Text Content

You can use innerText to access the visible text content of an element.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <div id="content">
        <p>This is a <strong>paragraph</strong>.</p>
    </div>

    <script>
        let contentElement = document.getElementById("content");
        console.log(contentElement.innerText);  // Output: "This is a paragraph."
    </script>
</body>
</html>

Setting Text Content

You can also use innerText to replace the text content of an element.

Example:

let contentElement = document.getElementById("content");
contentElement.innerText = "This is the new text content.";

This code replaces the existing text content inside the div element with new text.

5. Practical Examples

Changing Text Content

You can use innerText to change the text content of an element without affecting its structure.

Example:

let paragraph = document.getElementById("content");
paragraph.innerText = "This is the updated text content.";

Removing HTML Tags

Unlike innerHTML, innerText removes any HTML tags from the content and only returns the plain text.

Example:

let contentElement = document.getElementById("content");
contentElement.innerText = "<strong>Bold text</strong> is now just plain text.";

Dynamically Updating Text

You can use innerText to dynamically update the text content of an element based on user actions or other events.

Example:

let button = document.getElementById("updateButton");
button.addEventListener("click", function() {
    let contentElement = document.getElementById("content");
    contentElement.innerText = "The content has been updated!";
});

Handling Line Breaks

The innerText property respects line breaks, so any line breaks within the element will be preserved when retrieving or setting the text.

Example:

let contentElement = document.getElementById("content");
contentElement.innerText = "This is line 1.\nThis is line 2.";

6. Differences Between innerText and innerHTML

  • HTML Tags: innerHTML returns or sets the content including HTML tags, while innerText returns or sets only the text content, ignoring HTML tags.

  • Performance: innerText is generally faster when dealing with plain text, as it doesn't need to parse HTML.

  • Visibility: innerText only returns the visible text, ignoring hidden elements, while innerHTML includes all content, regardless of visibility.

Example:

<div id="content">
    <p style="display:none;">Hidden text</p>
    <p>Visible text</p>
</div>

<script>
    let contentElement = document.getElementById("content");
    console.log(contentElement.innerText);  // Output: "Visible text"
    console.log(contentElement.innerHTML);  // Output: "<p style="display:none;">Hidden text</p><p>Visible text</p>"
</script>

7. Limitations of innerText

  • No HTML Parsing: innerText strips out any HTML tags, so if you need to preserve HTML structure or elements, use innerHTML instead.

  • CSS Styles: innerText is affected by CSS styles that affect visibility (e.g., display: none;), meaning it won't return the text content of hidden elements.

8. Conclusion

In this detailed tutorial, we've explored the innerText property, which allows you to access and modify the visible text content of HTML elements. By mastering innerText, you can efficiently manage the text within your web pages, making them dynamic and user-friendly.

For more tutorials and examples, visit www.codeswithpankaj.com! Happy coding!

PreviousinnerHTML propertyNextJS form validation

Last updated