JavaScript | Change the text of a span element

23 May, 2019
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.
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 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:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.