JavaScript | Get the text of a span element

23 May, 2019
Given an HTML document and the task is to get the text of a <span> element. There are two methods used to get the span elements which are discussed below:
HTML DOM textContent Property: This property set/return the text content of the defined node, and all its descendants. By setting the textContent property, the child nodes are removed and are replaced by a single Text node having the specified string.Syntax:Return the text content of a node.node.textContent
Set the text content of a node.node.textContent = text
Property values: It contains single value text which specifies the text content of the specified node.Return value: It returns a string, representing the text of node and all its descendants. It returns null if the element is a document, a document type, or a notation.
Syntax:
Return the text content of a node.node.textContent

node.textContent

Set the text content of a node.node.textContent = text

node.textContent = text

Property values: It contains single value text which specifies the text content of the specified node.
Return value: It returns a string, representing the text of node and all its descendants. It returns null if the element is a document, a document type, or a notation.
HTML DOM innerText Property: This property set/return the text content of defined node, and all its descendants. By setting the innerText property, any child nodes are removed and are replaced by a single Text node having the specified string.Syntax:Return the text content of a node.node.innerText
Set the text content of a node.node.innerText = text
Property values: It contains single value text which specifies the text content of the specified node.Return value: It returns a string, representing the “rendered” text content of a node and all its descendants.
Syntax:
Return the text content of a node.node.innerText

node.innerText

Set the text content of a node.node.innerText = text

node.innerText = text

Property values: It contains single value text which specifies the text content of the specified node.
Return value: It returns a string, representing the “rendered” text content of a node and all its descendants.
Example 1: This example gets the content by using textContent property.
<!DOCTYPE HTML> <html>     <head>         <title>             JavaScript | Get the text of a span element        </title>    </head>           <body style = "text-align:center;" id = "body">                   <h1 style = "color:green;" >             GeeksForGeeks         </h1>                   <span id="GFG_Span" style = "font-size: 15px; font-weight: bold;">             This is text of Span element.         </span>                  <br><br>                  <button onclick = "gfg_Run()">             Click here        </button>                  <p id = "GFG_DOWN" style =             "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            var span = document.getElementById("GFG_Span");            var el_down = document.getElementById("GFG_DOWN");                          function gfg_Run() {                el_down.innerHTML = span.textContent;            }                 </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example gets the content by using innerText property.
<!DOCTYPE HTML> <html>     <head>         <title>             JavaScript | Get the text of a span element        </title>    </head>           <body style = "text-align:center;" id = "body">               <h1 style = "color:green;" >             GeeksForGeeks         </h1>               <span id="GFG_Span" style = "font-size: 15px; font-weight: bold;">             This is text of Span element.         </span>              <br><br>                  <button onclick = "gfg_Run()">             Click here        </button>                  <p id = "GFG_DOWN" style =             "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            var span = document.getElementById("GFG_Span");            var el_down = document.getElementById("GFG_DOWN");                          function gfg_Run() {                el_down.innerHTML = span.innerText;            }                 </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.