How to get the text without HTML element using JavaScript ?

How to get the text without HTML element using JavaScript ?

Last Updated : 07 Feb, 2023

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:

html

<!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>

Output:

Using textContent property: We can also use textContent property to get the text from HTML element.

Example:

html

<!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>

Output:

Let us compare the properties of the two methods:

innerText	textContent
It returns human-readable content	It returns texts along with the tag
It returns only styling elements and not the hidden elements	It returns all elements including hidden elements
It is defined only for HTMLElement objects	It is defined for all Node objects

How to get the text without HTML element using JavaScript ?

frikishaan

Improve

Article Tags :

Similar Reads

How to loop through HTML elements without using forEach() loop in JavaScript ?

In this article, we will learn how to loop through HTML elements without using the forEach() method. This can be done in the following ways: Table of Content Approach 1: Using the for loopApproach 2: Using the While loopApproach 3: Using the 'for.....of' statementApproach 4: Using the for...in state

How to get/change the HTML with DOM element in JavaScript ?

In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML. Using the getElementById() method: This method gets/identifies the DOM elements using its ID an

How to Get the Content of an HTML Comment using JavaScript ?

In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (incl

How to get the outer html of an element using jQuery ?

Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to

How to select all Text in HTML Text Input when clicked using JavaScript?

To select the text in HTML Text Input we can use the JavaScript DOM methods and we will select the text when we click the text box.Using document.getElementById() methodSyntax:<input onClick="this.select();" > or document.getElementById("ID").select();Example 1: We will use "this.select()" in

How to Change Text Inside all HTML Tags using JavaScript ?

In this article, we will learn how to change the text content inside all HTML tags using JavaScript. This skill is valuable when you need to dynamically modify the text displayed on a web page. which can be useful for various scenarios like updating content, internationalization, or creating dynamic

Get the Value of Text Input Field using JavaScript

Getting the value of a text input field using JavaScript refers to accessing the current content entered by a user in an input element, such as <input> or <textarea>, by utilizing the value property. This allows for dynamic interaction and data manipulation in web forms.Syntax inputField

Manipulating HTML Elements with JavaScript

JavaScript is a powerful language that can be used to manipulate the HTML elements on a web page. By using JavaScript, we can access the HTML elements and modify their attributes, styles, and content. This allows us to create dynamic and interactive web pages. Methods to Identify the elements to man

How to get HTML content of an iFrame using JavaScript ?

The <iframe> tag specifies an inline frame. It allows us to load a separate HTML file into an existing document. Code snippet:function getIframeContent(frameId) { let frameObj = document.getElementById(frameId); let frameContent = frameObj. contentWindow.document.body.innerHTML; alert("frame c

How to append data to <div> element using JavaScript ?

To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div.