JavaScript | Get the text of a span element
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.
- Return the text content of a node.
- 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.
- Return the text content of a node.
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: