Difference between textContent and innerText

Difference between textContent and innerHTML

Last Updated : 07 Aug, 2024

The textContent and innerHTML are properties of JavaScript. However, there are differences in the way the specified text is handled in JavaScript. Let us take a look at the syntax of both of these properties.

Syntax:

Let elem be a JavaScript variable that holds an element that is selected from the page.

let elem = document.getElementById('test-btn');

The textContent and innerHTML properties can be used as follows:

The textContent property: This property is used to get or set the text content of the specified node and its descendants.

elem.textContent

The innerHTML property: This property is used to get or set the HTML content of an element.

elem.innerHTML

Example: This example shows the difference between the innerHTML and textContent properties of DOM.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Document</title>
</head>

<body style="text-align:center;">
    <h1 style="color:#006600">
        GeeksforGeeks
    </h1>

    <div id="test-btn">
        The following element contains some
        <bold>bold</bold> and
        some <italic>italic text</italic>.
    </div>

    <p></p>

    <button onClick="innerHTMLfn()">
        innerHTML
    </button>

    <button onClick="textContentfn()">
        textContent
    </button>

    <p id="demo-para"></p>

    <script>
        function textContentfn() {
            let elem =
                document.getElementById('test-btn');
            alert(elem.textContent);
        }

        function innerHTMLfn() {
            let elem =
                document.getElementById('test-btn');
            alert(elem.innerHTML);
        } 
    </script>
</body>

</html>

Output:

The following video represents the difference between innerHTML and textContent. The appropriate results can be viewed by clicking on the respective button as shown.

Difference Table:

innerHTML	textContent
The innerHTML property gets or sets the HTML contents of the element	The textContent does not automatically encode and decode text and hence allows us to work with only the content part of the element

Difference between textContent and innerText

M

mharshita31

Improve

Article Tags :

Similar Reads

Difference between textContent and innerText

1. textContent : This property is used to set or return the text value of the selected node and all its descendants. While setting the textContent property, any child nodes are removed. It is replaced by a single Text node containing the specified string. Syntax : To set the text of node - node.text

Difference between innerText and innerHTML

innerText and innerHTML are both properties of JavaScript. However, there are differences in which the text is handled. Let us check the syntax of the two and then take an example to look at the differences. Syntax: Let us assume that we have a JavaScript variable called x.let x = document.getElemen

Difference between XHTML and HTML5

XHTML is an older, stricter version of HTML that follows XML rules. HTML5 is the latest and more flexible version, bringing in new features for better multimedia and web applications. HTML5 is simpler to use, while XHTML demands strict adherence to XML standards. Table of Content XHTMLHTML5Similarit

Difference between HTML and WML

1. Hyper Text Markup Language (HTML) : Hyper Text Markup Language (HTML) refers to the standard markup language to create web pages. It consists of series of elements/tags which are used to define structure of your content means design the structure of a web page. It was created to serve content to

Difference between HTML and HTML5

HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the structu

Difference between JSP and HTML

1. Java Server Pages (JSP) : JSP stands for Java Server Pages. These files have the extension. jsp. The main advantage of JSP is that the programmer can insert Java code inside HTML. There are JSP tags to insert Java code. The programmer can write the tag at the end of the Java code. There are diffe

Difference Between HTML and SGML

Most of us are familiar with HTML due to its connection to the World Wide Web. It drives the internet, allowing us to build and use websites, share material, and communicate with online services. HTML is only one branch of a much broader tree called SGML, which serves as the basis for several markup

Difference between text() and html() method in jQuery

Text() Method: This method returns the text content of the selected elements. It overwrites the content of all the matches element while setting the content. Syntax: To return text content:$(selector).text()To set text content:$(selector).text(content)To set the text content using a function:$(selec

Difference between JavaScript and HTML

JavaScriptJavaScript is a programming language that conforms to the ECMAScript specification. It is a high-level scripting language introduced by Netscape to be run on the client-side of the web browser. It can insert dynamic text into HTML. JavaScript is also known as the browserâ€™s language. HTMLHT

Difference Between HTML, XML and DHTML

1. HTML HTML stands for HyperText Markup Language.Used to design the layout of a document and to specify the hyperlinks.Tells the browser how to display text, pictures, and other support media.Support multimedia and new page layout features.Easy to integrate with other programming languages.HTML con