Skip to content
10x Tech Infinity

Changing Text and HTML Content with JavaScript: innerText, textContent, and innerHTML

When building dynamic websites, you often need to update the content of your HTML elements. JavaScript provides three main ways to do this: innerText, textContent, and innerHTML. Let’s explore each of these methods and understand their differences.

Setting Up Our HTML

First, let’s look at the HTML we’ll be working with:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CHANGE INNER TEXT</title>
    <script src="./3DOM-TEXT-CONTENT-HTML.JS" defer></script>
  </head>
  <body>
    <h1 id="main-id" class="main-class">
      Manage your tasks <span style="display: none">Hello</span>
    </h1>
  </body>
</html>

This HTML creates an <h1> element with visible text and a hidden <span>.

Understanding innerText, textContent, and innerHTML

Let’s select our heading and explore these properties:

let heading = document.querySelector("h1");
console.dir(heading);

Now, let’s look at each property:

1. innerText

console.log(heading.innerText);
// Output: Manage your tasks

innerText returns only the visible text content of the element.

2. textContent

console.log(heading.textContent);
// Output:     Manage your tasks Hello

textContent returns all text content, including hidden elements, and preserves whitespace.

3. innerHTML

console.log(heading.innerHTML);
// Output:     Manage your tasks <span style="display: none">Hello</span>

innerHTML returns the HTML content inside the element, including tags.

Changing Content

Now, let’s see how we can use these properties to change content:

Using innerText

heading.innerText = "Hello, My name is Manoj Nishad.";
console.dir(heading);

This replaces all text content with the new string.

Using textContent

heading.textContent = "Hello, I am Manoj Nishad.";
console.dir(heading);

This also replaces all text content, including any hidden text.

Using innerHTML

heading.innerHTML = `
    <h1>Dear</h1>
    <p style="color:blue;">My Friend</p>
`;
heading.innerHTML += `<button>Submit</button>`;
console.dir(heading);

innerHTML allows you to add HTML structure and elements. You can also append content using +=.

Key Differences

  1. innerText is aware of styling and won’t return hidden text.
  2. textContent returns all text, regardless of styling.
  3. innerHTML allows you to work with HTML structure, not just text.

When to Use Each

  • Use innerText when you only want visible text and don’t need to preserve formatting.
  • Use textContent when you want all text content, including hidden text, and want to preserve whitespace.
  • Use innerHTML when you need to add or modify HTML structure within an element.

Security Note

Be cautious when using innerHTML with user-provided content, as it can potentially introduce security vulnerabilities if not properly sanitized.

Conclusion

Understanding these properties gives you powerful tools for manipulating webpage content dynamically. Choose the right property based on your specific needs, and remember to consider both functionality and security in your web applications.

Happy Learning!