jQuery: How to Change Text (Simple Guide for Beginners)

Changing text dynamically on a webpage is one of the most common tasks in web development. With jQuery, you can do it quickly and easily — without writing long lines of code.

In this tutorial, we’ll explore how to change text using jQuery, the most popular JavaScript library for front-end developers.

What Is jQuery?

jQuery is a lightweight JavaScript library that simplifies HTML document traversal, event handling, animation, and AJAX interactions.

In simple terms, jQuery makes JavaScript easier to write and understand — especially when manipulating the DOM (Document Object Model).

Before you use it, make sure jQuery is added to your webpage.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>Code language: HTML, XML (xml)

How to Change Text Using jQuery

jQuery provides a built-in method called .text() to get or set the text content of an element.

Here’s the syntax:

$(selector).text("new text");Code language: JavaScript (javascript)

• $(selector) → selects the HTML element you want to change.
• .text("new text") → replaces the old text with the new one.

Example 1: Change Paragraph Text

<p id="demo">This is old text.</p>

<script>
  $("#demo").text("This is new text using jQuery!");
</script>
Code language: HTML, XML (xml)

✅ Output:
This is new text using jQuery!

Explanation:
The #demo is an ID selector that finds the <p> element and updates its text content.

Example 2: Change Text When a Button Is Clicked

You can also change text dynamically with a click event:

<p id="message">Hello, world!</p>
<button id="changeBtn">Change Text</button>

<script>
  $("#changeBtn").click(function() {
    $("#message").text("You just changed the text!");
  });
</script>
Code language: HTML, XML (xml)

✅ Explanation:

• When you click the button, the .click() event runs the function.
• Inside it, .text() changes the paragraph’s content instantly.

Example 3: Change Multiple Elements at Once

jQuery allows you to target multiple elements easily:

<h2 class="title">Title One</h2>
<h2 class="title">Title Two</h2>

<script>
  $(".title").text("Updated Title");
</script>
Code language: HTML, XML (xml)

✅ Output:
All <h2> elements with class .title now show “Updated Title”.

Difference Between .text() and .html()

Method	Description	Example
.text()	Changes only plain text	$("#demo").text("Hello")
.html()	Can insert HTML content	$("#demo").html("<b>Hello</b>")

Use .text() when you just need to change or display text safely (without HTML formatting).

Example 4: Get and Set Text with .text()

You can also retrieve text content using .text() without passing any argument:

<p id="info">Learning jQuery is fun!</p>

<script>
  let textValue = $("#info").text();
  console.log(textValue);
</script>
Code language: HTML, XML (xml)

✅ Output in Console:
Learning jQuery is fun!

Best Practices

✅ Use unique IDs or meaningful classes when targeting elements.
✅ Use .text() for plain text and .html() for HTML markup.
✅ Always ensure the DOM is ready before manipulating elements:

$(document).ready(function() {
  $("#demo").text("Page loaded!");
});
Code language: JavaScript (javascript)

💡 Quick Recap

Task	Code	Result
Change text	$("#demo").text("New Text")	Updates element’s text
Get text	$("#demo").text()	Retrieves current text
Change text on click	$("#btn").click(function(){ ... })	Changes on button click

Final Thoughts

Using jQuery to change text is one of the simplest and most powerful ways to make your webpage interactive and dynamic.
Whether you’re updating content after a click, fetching data dynamically, or just changing messages — the .text() method is your go-to tool.