JavaScript |更改 span 元素的文本

给定一个 HTML 文档，任务是更改 span 元素的文本。有两个属性用于更改内容。

• HTML DOM textContent 属性：此属性设置/返回已定义节点及其所有后代的文本内容。通过设置 textContent 属性，子节点将被移除并替换为具有指定字符串的单个文本节点。

  句法：

  • 返回节点的文本内容：

    node.textContent
    

  • 设置节点的文本内容：

    node.textContent = text
    

  属性值：它包含指定指定节点的文本内容的单值文本。

  返回值：它返回一个字符串，代表节点及其所有后代的文本。如果元素是文档、文档类型或符号，则返回 null。

• HTML DOM innerText 属性：此属性设置/返回已定义节点及其所有后代的文本内容。通过设置 innerText 属性，所有子节点都将被删除并替换为具有指定字符串的单个文本节点。

  句法：

  • 返回节点的文本内容：

    node.innerText
    

  • 设置节点的文本内容：

    node.innerText = text
    

  属性值：它包含指定指定节点的文本内容的单值文本。

  返回值：它返回一个字符串，表示一个节点及其所有后代的“渲染”文本内容。

示例 1：此示例使用textContent 属性更改内容。

 
 
     
         
            JavaScript | Change the text of a span element
        
     
      
     
          
         
            GeeksForGeeks 
         
          
        
            This is text of Span element. 
        
          
        
          
         
            Change
        
          
        
        
          
        
            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";
            }         
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：此示例使用innerText 属性更改内容。

 
 
     
         
            JavaScript | Change the text of a span element
        
     
      
     
          
         
            GeeksForGeeks 
         
          
         
            This is text of Span element. 
        
          
        
          
         
            Change
        
          
        
        
          
        
            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";
            }         
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：