DEV Community

Code X Savage
Code X Savage

Posted on

Editing Text Contents with DOM

#javascript #frontend #beginners #learning

One of the biggest misconceptions I had when learning JavaScript was thinking that the DOM and HTML were the same thing.

They aren't.

When I first started manipulating web pages, I kept hearing things like:

"Use querySelector() to select an element from the DOM."

My first thought was:

"Isn't it just selecting the HTML?"

It turns out there's an important difference, and understanding that difference makes JavaScript much easier to reason about.

Let's break it down.

HTML vs The DOM

HTML is simply a text document.

<body>
    <h1>Hello World</h1>
    <p>Welcome to my website.</p>
</body>
Enter fullscreen mode Exit fullscreen mode

That's all it is.

A text file.

Your browser then reads that file and creates something called the Document Object Model (DOM).

Think of the DOM as a live representation of your HTML that JavaScript can interact with.

Document
│
└── body
    ├── h1
    │   └── "Hello World"
    │
    └── p
        └── "Welcome to my website."
Enter fullscreen mode Exit fullscreen mode

JavaScript never edits your original HTML file.

Instead, it manipulates this DOM tree.

That's why when you inspect a page in your browser, you'll often see changes that don't exist inside your original HTML file.

Selecting Elements

Once the DOM has been created, JavaScript can find elements.

const heading = document.querySelector("h1");
Enter fullscreen mode Exit fullscreen mode

Now you have access to that DOM node.

From here you can:

  • Change text
  • Change styles
  • Add classes
  • Remove elements
  • Create new elements
  • Listen for events

This is what people mean when they say JavaScript manipulates the DOM.

Changing Content

This is where many beginners get confused.

JavaScript gives us multiple ways to change an element's content.

The three you'll encounter the most are:

  • innerHTML
  • innerText
  • textContent

At first glance they seem similar.

They're not.

1. innerHTML

innerHTML reads or writes HTML inside an element.

Example:

<div id="box"></div>
Enter fullscreen mode Exit fullscreen mode 
const box = document.getElementById("box");

box.innerHTML = "<h2>Hello</h2>";
Enter fullscreen mode Exit fullscreen mode

The browser creates an actual <h2> element.

Result:

<div id="box">
    <h2>Hello</h2>
</div>
Enter fullscreen mode Exit fullscreen mode

This makes innerHTML incredibly powerful.

Pros

  • Can create HTML dynamically.
  • Useful for rendering templates.
  • Great for inserting multiple elements at once.

Cons

If the content comes from user input, using innerHTML carelessly can introduce security issues, such as executing unwanted HTML or scripts.

It also causes the browser to parse the HTML again, which can be less efficient than simply changing text.

For those reasons, avoid using innerHTML unless you actually need to insert HTML.

2. innerText

innerText only works with visible text.

<p id="text">
    Hello
    <span style="display:none">Hidden</span>
</p>
Enter fullscreen mode Exit fullscreen mode 
console.log(text.innerText);
Enter fullscreen mode Exit fullscreen mode

Output:

Hello
Enter fullscreen mode Exit fullscreen mode

Notice the hidden text isn't included.

This is because innerText considers how the page is rendered.

If something isn't visible to the user, it usually won't appear.

Pros

  • Reflects what users actually see.
  • Great for reading visible text.
  • Ignores hidden content.

Cons

Because it considers styling and layout, reading innerText can require extra work from the browser.

For large applications, repeatedly using it can be less efficient than textContent.

3. textContent

textContent retrieves all text inside an element.

Using the same example:

<p id="text">
    Hello
    <span style="display:none">Hidden</span>
</p>
Enter fullscreen mode Exit fullscreen mode 
console.log(text.textContent);
Enter fullscreen mode Exit fullscreen mode

Output:

Hello Hidden
Enter fullscreen mode Exit fullscreen mode

Unlike innerText, it doesn't care whether the text is visible.

It simply returns the raw text contained in the node.

Pros

  • Faster than innerText.
  • Includes hidden text.
  • Doesn't interpret HTML.
  • Safe for inserting plain text.

Cons

It ignores how the page is displayed.

If you only care about what users can actually see, innerText may be the better choice.

Which One Should You Use?

Here's a simple rule I like to follow.

Use When
textContent When you're working with plain text.
innerText When you specifically need the visible text shown to users.
innerHTML Only when you genuinely need to create or insert HTML.

If you're unsure, start with textContent.

It's safer and usually the better default.

A Common Beginner Mistake

When I first learned JavaScript, I used innerHTML for almost everything.

heading.innerHTML = username;
Enter fullscreen mode Exit fullscreen mode

Later I realised I wasn't inserting HTML.

I was only displaying text.

This is a much better choice:

heading.textContent = username;
Enter fullscreen mode Exit fullscreen mode

It's simpler, safer, and communicates your intention more clearly.

Final Thoughts

Understanding the DOM isn't just about learning methods like querySelector().

It's about understanding what JavaScript is actually manipulating.

The browser converts your HTML into a DOM tree.

JavaScript interacts with that tree.

And choosing the right property—innerHTML, innerText, or textContent—depends on what you're trying to achieve.

The more you understand these differences, the more confident you'll become when building interactive web applications.

What About You?

When you first started learning JavaScript, which one confused you the most?

  • innerHTML
  • innerText
  • textContent

I'd love to hear your experience in the comments.

Top comments (0)