Change text of HTML page Element using JavaScript

Change text of HTML page Element using JavaScript

📋 Table Of Content

In Javascript, we have different methods to change the content or text of an HTML element. For example, using innerHTML, innerText, and textContent properties.

Le's check with examples to change text of an element using JavaScript.

Change Text of an Element using textContent property

To change the text content of an HTML element in a web page we can use the textContent property of the HTML tag of your web page.

The textContent property helps us to set or return the text content of the specified element along with its descendants. It helps us to manipulate the content of the element with the help of Javascript.

All the elements for example <div>, <p> or <span> ,etc have the textContent property that helps us to change the content of the element.

For example, suppose we have a page with the following content in it.

<body>
   <h1 id="header">Post Header</h1>
   <p>InnerContent content</p>
   <script src="src/index.js"></script>
</body>

Here, we have an HTML content of a page: We have a <h1> header tag with an id name, a paragraph tag, and a script tag to write the javascript code.

Here, we will change the header (h1) text using the textContent property to "Hello Everyone"

First, we have to get the <h1> tag element using getElementById() selector, like this:

const header = document.getElementById("header");

Since the <h1> tag have the id = header, we can easily get the specified element easily using the getElementById() selector.

Next, we will use the textContent property to change the text of the h1 tag in the page.

const header = document.getElementById("header");

header.textContent = "Hello Everyone ";

The textContent property has replaced the content of the h1 element from "Post Header" to "Hello Everyone".

Now, another way to change the text of an HTML element is to use the insertAdjacentText method.

Change text of an HTML element using insertAdjacentText() method

The insertAdjacentText() method let's you append/prepend text to an existing text content of an HTML element.

Syntax:

insertAdjacentText(position, data)

There are four defined position where we can insert our text:

  1. beforebegin - before the selected element
  2. afterbegin - inside the selected element, before its first child
  3. beforeend - inside the element, before its last child
  4. afterend - after the selected element itself

The data is the text content we want to insert in a specified position.

Let's see an example to add some text to an element.

<body>
   <h1 id="header">Post Header</h1>
   <p id="content">A paragraph content</p>
   <script src="src/index.js"></script>
</body>

Here, we have added an id "content" to the paragraph element and we will append some text to the existing content.

const title = document.getElementById("content");

title.insertAdjacentText("beforeend", "Thank you")

Output:

A paragraph content.Thank you

Here, we have inserted the text content after the first line ends.

Change text and HTML of a page using Javascript

Both the above mentioned methods can only change the text content of an HTML element.

However, if you want to change or add the html tag inside the selected HTML elements we can use the:

  1. innerHTML property and
  2. insertAdjacentHTML method

For example, let's suppose we have a <p> tag with some text in it.

<p id="content">This is a paragraph</p>

And if we want to bold the text content then using innerHTML property we can add the <b> tag around the text.

const para = document.getElementById("content");

para.innerHTML = "<b>This is a paragraph.</b>";

This changes the text content and the html of the element.

And if we want to append some text after the first line with some HTML, we can do that with the help of the insertAdjacentHTML() method.

const para = document.getElementById("content");

para.insertAdjacentHTML("beforeend", "<b>Thank you</b>");

Conclusion:

The easiest way to add or change the content in an HTML element is to use the textContent property and insertAdjacentText() method. And to change the HTML along with the text then we can use the innerHTML property and insertAdjacentHTML() method.