How to Change the Text Content of an Element in JavaScript

Author:
In JavaScript, changing the text content of an HTML element is a common operation when working with the DOM (Document Object Model). You can easily modify the text displayed inside an element using JavaScript methods. This post will show you how to change the text content of an element with different techniques.

Table of Contents

  1. Using textContent
  2. Using innerHTML
  3. Difference Between textContent and innerHTML
  4. Selecting the Element by ID or Class
  5. Conclusion

1. Using textContent

The textContent property allows you to get or set the plain text inside an element. This is the recommended method for changing the text because it’s secure and fast.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Change Text Content</title>
</head>
<body>
  <h1 id="heading">Original Heading</h1>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const heading = document.getElementById("heading");
heading.textContent = "New Heading Text";

Output:

<h1 id="heading">New Heading Text</h1>

Explanation:

  • document.getElementById("heading") selects the <h1> element with the ID "heading".
  • heading.textContent = "New Heading Text"; changes the content inside the <h1> element to the new text.

2. Using innerHTML

The innerHTML property is another way to change the text content of an element. However, it also allows you to insert HTML inside the element, which can be useful when you need to include markup.

Example:

const heading = document.getElementById("heading");
heading.innerHTML = "<em>New Heading with Italics</em>";

Output:

<h1 id="heading"><em>New Heading with Italics</em></h1>

Explanation:

  • innerHTML not only changes the text but also allows you to insert HTML elements (like <em> for italics) inside the element.
  • Note: Be cautious when using innerHTML with user-generated content as it can expose your website to XSS (cross-site scripting) attacks if not properly sanitized.

3. Difference Between textContent and innerHTML

  • textContent: Safely sets or retrieves the text without interpreting HTML. It only works with plain text and is generally faster and more secure.
  • innerHTML: Can set or retrieve HTML content, allowing for more complex modifications (including HTML elements), but has potential security risks if not used carefully.

Example:

// With textContent (plain text)
heading.textContent = "<strong>Text with tags</strong>";  // Displays as plain text

// With innerHTML (interprets HTML)
heading.innerHTML = "<strong>Text with tags</strong>";  // Displays as bold text

Output for textContent:

<strong>Text with tags</strong>  (As plain text)

Output for innerHTML:

Text with tags  (As bold text)

4. Selecting the Element by ID or Class

Before changing the text content, you need to select the element. You can do this by ID, class, or other methods.

Selecting by ID:

const element = document.getElementById("elementId");
element.textContent = "New Text";

Selecting by Class:

const elements = document.getElementsByClassName("className");

for (let i = 0; i < elements.length; i++) {
  elements[i].textContent = "New Text for All Elements";
}

Selecting by Query Selector:

const element = document.querySelector(".className");
element.textContent = "New Text";

Explanation:

  • getElementById() selects a single element by its ID.
  • getElementsByClassName() selects all elements with a given class name and requires looping to modify multiple elements.
  • querySelector() selects the first element that matches the specified selector.

5. Conclusion

Changing the text content of an element in JavaScript is simple and can be done using textContent or innerHTML, depending on whether you need plain text or HTML. Always use textContent when working with plain text to avoid security risks, and use innerHTML carefully if you need to insert HTML markup.

Key Points:

  • textContent: Safe and efficient for changing plain text.
  • innerHTML: Allows insertion of HTML, but be cautious with security.
  • Always select the element before modifying its content using methods like getElementById(), getElementsByClassName(), or querySelector().

Related JavaScript Programs:

JavaScript: Add Two Numbers JavaScript: Subtract Two Numbers JavaScript: Multiply Two Numbers JavaScript: Divide Two Numbers JavaScript: Find the Remainder of Two Numbers JavaScript: Check if a Number is Even or Odd JavaScript: Find the Largest Among Three Numbers JavaScript: Find the Smallest Among Three Numbers JavaScript: Check if a Number is Prime JavaScript: Find the Factorial of a Number JavaScript: Print the Fibonacci Series JavaScript: Reverse a String JavaScript: Check if a String is a Palindrome JavaScript: Convert Celsius to Fahrenheit JavaScript: Convert Fahrenheit to Celsius JavaScript: Find the Area of a Circle JavaScript: Find the Perimeter of a Rectangle JavaScript: Sort an Array JavaScript: Find the Maximum and Minimum Element in an Array JavaScript: Find the Sum of Elements in an Array JavaScript: Merge Two Arrays JavaScript: Remove Duplicates from an Array JavaScript: Count the Occurrences of an Element in an Array JavaScript: Search for an Element in an Array JavaScript: Implement the Bubble Sort Algorithm JavaScript: Implement the Quick Sort Algorithm JavaScript: Implement the Insertion Sort Algorithm JavaScript: Check if a String Contains Another String JavaScript: Split a String into an Array of Words JavaScript: Join an Array of Words into a String JavaScript: Check if Two Strings are Anagrams JavaScript: Implement a Basic Calculator JavaScript: Get the Current Date and Time JavaScript: Implement a Countdown Timer JavaScript: Validate an Email Address JavaScript: Validate a Phone Number JavaScript: Swap Two Variables JavaScript: Count the Number of Words in a String JavaScript: Implement a Stack using Arrays / Objects JavaScript: Implement a Queue using Arrays / Objects JavaScript: Depth-First Search (DFS) on a Graph JavaScript: Breadth-First Search (BFS) on a Graph JavaScript: Implement a Binary Search Tree JavaScript: Detect a Cycle in a Linked List JavaScript: Implement the Tower of Hanoi Algorithm JavaScript: Search for an Element in a Binary Search Tree JavaScript: Implement a Priority Queue JavaScript: Implement an AVL Tree JavaScript: Implement a Circular Queue using Arrays JavaScript: Implement a Doubly Linked List JavaScript Function: Sum of Two Numbers JavaScript: Convert a String to Title Case JavaScript: Reverse a String without Built-in reverse() Function JavaScript: Reverse the Words in a Sentence without Built-in Function

Comments

Post a Comment

Leave Comment