📋 Table Of Content
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.
All the elements for example
<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
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");
<h1> tag have the id = header, we can easily get the specified element easily using the
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 ";
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
Change text of an HTML element using insertAdjacentText() method
insertAdjacentText() method let's you append/prepend text to an existing text content of an HTML element.
There are four defined
position where we can insert our text:
- beforebegin - before the selected element
- afterbegin - inside the selected element, before its first child
- beforeend - inside the element, before its last child
- afterend - after the selected element itself
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")
A paragraph content.Thank you
Here, we have inserted the text content after the first line ends.
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:
- innerHTML property and
- 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
const para = document.getElementById("content"); para.insertAdjacentHTML("beforeend", "<b>Thank you</b>");
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.
- Line continuation | Long statement in Multiple lines in Python
- Find Length of Dictionary in Python with Examples
- Reverse an Array in Python (Using Numpy And Array Module)
- Python import from parent directory
- How to use Pi in Python? (math and numpy module)
- FileNotFoundError: No such file or directory Error Python