How to get the text without HTML element using JavaScript ?
Given an HTML document containing some elements and the task is to get the text inside an HTML element using JavaScript. There are two methods to get the text without HTML element which are listed below:
- Using innerText property
- Using textContent property
Using innerText property: We can use innerText property to get the text from HTML element.
Example:
<!DOCTYPE html> < html > < head > < title > Get the text inside HTML element using JavaScript </ title > </ head > < body > < div class = "main" > Welcome to GeeksforGeeks </ div > < script > const div = document.querySelector('.main'); alert(div.innerText); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Using textContent property: We can also use textContent property to get the text from HTML element.
Example:
<!DOCTYPE html> < html > < head > < title > Get the text inside HTML element using JavaScript </ title > </ head > < body > < div class = "main" > Welcome to GeeksforGeeks </ div > < script > const div = document.querySelector('.main'); alert(div.textContent); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Difference between innerText and textContent:
- The
innerText
property returns only human-readable text while thetextContent
property returns all the text including<script>
and<style>
tag. - The
innerText
property take care of styling of elements and did not return any hidden elements whiletextContent
property returns all the elements including the hidden ones. - The
innerText
property is defined only for HTMLElement objects, whereastextContent
property is defined for all Node objects.