How to change text in HTML using javascript?

 

Are you diving into JavaScript and scratching your head, wondering how on earth to change text dynamically on your webpage? Don’t worry, you’re not alone — it’s a question almost every beginner asks (and yes, even seasoned developers occasionally fumble here!).

In this guide, we’re going to make text updates feel as easy as changing your WhatsApp status — only cooler, because it’s JavaScript magic. We’ll cover everything from general text changes to modifying specific elements like divs, spans, headings, paragraphs, and even those sneaky input fields.

Imagine this: you click a button and suddenly your “Hello World” paragraph transforms into “Hello Universe!” — all without touching your HTML manually. Sounds fun, right? That’s exactly what you’ll be able to do by the end of this tutorial.

We’ll explore the three superpowers of text modification: innerText, textContent, and .value. You’ll see how innerText handles only the visible text, textContent grabs everything including hidden bits, and .value is your go-to for textboxes.

By the time you finish, you’ll be confidently updating text on any element, making your webpages interactive and dynamic — maybe even impressing your cat.

Ready to turn boring static text into something lively? Let’s jump in!

---

Table of Contents

1. how to change text in javascript- basic method
2. three ways to change text
3. Changing Text of Specific Elements
• Div
• Span
• Headings (H2)
• Paragraphs
• Textboxes
4. Sample code

---

 

How to Change Text in JavaScript

Ever wanted your webpage to talk back or change text magically when something happens? Well, that’s JavaScript for you!

In JavaScript, you can change the content of any HTML element dynamically — yes, that paragraph, that heading, even that lonely little span hiding in the corner.

The three most common ways to do this are:

1. innerText – Changes the visible text of an element. Perfect when you just want to replace words.
2. textContent – Changes all the text inside an element, including the hidden stuff. Faster than innerText and a bit more serious.
3. innerHTML – Changes the HTML inside the element. Want to add a bold tag or a funny emoji? This is your friend.

 

Example: General Text Change

Let’s start simple. Say you have this little paragraph:

<p id="myText">Hello World!</p>

//Now, let’s tell JavaScript to update it. No magic wand needed, just a tiny bit of code:

// First, select the element
const myText = document.getElementById("myText");


// Now, change its text
myText.innerText = "Hello JavaScript!";

And just like that, your paragraph goes from “Hello World!” to “Hello JavaScript!”

---

 

Three Ways to Change Text in JavaScript

Changing text in JavaScript is easier than convincing your cat to let you pet it… almost .
There are three main ways to do it: innerText, textContent, and innerHTML. Let’s break them down so you don’t get lost in the jungle of JavaScript.

1. innerText

myText.innerText = "Updated using innerText";

Changes only what’s visible on the page.

Ignores hidden text or extra spacing.

Think of it like painting over a billboard — only what people can see actually changes.

2. textContent

myText.textContent = "Updated using textContent";

Changes all the text inside an element, even the hidden bits.

Faster and more reliable for general text updates.

Imagine it as a ninja — it updates every single piece of text, stealth mode style.

3. innerHTML

myText.innerHTML = "<b>Bold Text!</b>";

Changes both text and HTML, so you can even add formatting like bold, italics, or crazy emojis if you want.

Perfect for when you want to spice up your text with a little HTML magic.

 Pro Tip:
Use innerText when you just want to change visible text, textContent for speedy and reliable updates, and innerHTML when you need some HTML flair.

 

---

 
Changing Text of Specific Elements

Sometimes you don’t just want to change any random text — you want to target specific elements on your page. Lucky for you, JavaScript makes it easy. Let’s go element by element and see how it’s done.

1. Changing Text in a Div

<div id="myDiv">Original Div Text</div>

document.getElementById("myDiv").innerText = "Updated Div Text";

• Think of a div as a little container box.
• Using innerText here updates what people actually see inside that box.
• Easy peasy, lemon squeezy .

2. Changing Span Text

<span id="mySpan">Old Span Text</span>

document.getElementById("mySpan").textContent = "New Span Text";

• span is like a tiny text wrapper — perfect for short bits of text.
• textContent updates all the text inside, even if you have some hidden spaces sneaking around.
• Quick tip: spans are sneaky, so make sure you select the right one! 

3. Changing Heading (H2)

<h2 id="myHeading">Welcome!</h2>

document.getElementById("myHeading").innerText = "Hello H2!";

• Headings are big and bold — and now your JavaScript can boss them around too.
• innerText is perfect for changing visible headings without touching the HTML structure.

4. Changing Paragraph Text

<p id="myParagraph">This is a paragraph.</p>

document.getElementById("myParagraph").textContent = "Paragraph updated!";

• Paragraphs are the workhorses of your page.
• textContent makes sure every word gets updated — even the sneaky hidden ones.
• Think of it as giving your paragraph a quick makeover. 

5. Changing Text in a Textbox

<input type="text" id="myInput" value="Old Value">

document.getElementById("myInput").value = "New Value";

• Input boxes need a special trick: you can’t use innerText or textContent.
• .value is the key here — it updates the text that the user can actually type into or see.
• Basically, it’s like changing the placeholder while the user isn’t looking

 

---

 

Sample Code

Here’s a full working example you can copy, paste, and try yourself. This code demonstrates changing text for different elements using innerText, textContent, and .value in JavaScript.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change Text Example</title>
  <style>
    div, span, h2, p { margin: 10px 0; padding: 5px; border: 1px solid #ccc; }

    input { margin: 5px 0; }

  </style>

</head>
<body>

  <h2 id="myHeading">This is H2 Heading</h2>

  <p id="myParagraph">This is a paragraph.</p>

  <div id="myDiv">This is a div</div>

  <span id="mySpan">This is a span</span>

  <input type="text" id="myInput" value="Textbox value">

  <button id="changeTextBtn">Change Text</button>

  <script>

    // Select the button
    const button = document.getElementById('changeTextBtn');

    button.addEventListener('click', function() {
      // General text change

      document.getElementById('myParagraph').textContent = "Paragraph updated!";

  
      // Div text change
      document.getElementById('myDiv').innerText = "Div text changed!";



      // Span text change
      document.getElementById('mySpan').textContent = "New span text!";
   

      // H2 heading text change
      document.getElementById('myHeading').innerText = "Heading updated!";

    
      // Textbox value change

      document.getElementById('myInput').value = "New textbox value";

      alert("All texts have been updated!");
    });

  </script>

</body>
</html>

Summary of the Code

• The example shows different HTML elements: H2, paragraph, div, span, and input.
• The button triggers all text changes when clicked.
• It demonstrates three ways to modify text in JavaScript:
• innerText → for visible text only
• textContent → for all text inside an element
• .value → for input fields like textboxes
• Ideal for beginners to practice dynamic text updates and understand how JavaScript interacts with HTML elements.

 

 

---