Given an HTML document and the task is to change the text of span element. There are two property used to change the content.
- 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 the 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 changes the content by using textContent property .
<!DOCTYPE HTML> < html > < head > < title > JavaScript | Change 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()" > Change </ 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() { span.textContent = "New Span content"; el_down.innerHTML = "Span content changed"; } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example 2: This example changes the content by using innerText property .
<!DOCTYPE HTML> < html > < head > < title > JavaScript | Change 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()" > Change </ 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() { span.innerText = "New Span content"; el_down.innerHTML = "Span content changed"; } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button: