JavaScript 更改Span元素的文本

在本文中，我们提供了一个HTML文档，并且任务是更改span元素的文本。有两个属性用于更改内容。

使用HTML DOM textContent属性
使用HTML DOM innerText属性

使用HTML DOM textContent属性

该属性设置/返回已定义节点及其所有后代的文本内容。通过设置textContent属性，子节点被替换为一个具有指定字符串的单个文本节点。

语法:

返回节点的文本内容:

node.textContent

设置节点的文本内容：

node.textContent = text

示例： 通过使用 textContent属性 ，可以改变内容。

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <title> 
        JavaScript Change the text of a span element 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <span id="GFG_Span"> 
        This is text of Span element. 
    </span> 
  
    <br><br> 
  
    <button onclick="gfg_Run()"> 
        Change 
    </button> 
  
    <p id="GFG_DOWN"></p> 
  
    <script> 
        let span = document.getElementById("GFG_Span"); 
        let el_down = document.getElementById("GFG_DOWN"); 
  
        function gfg_Run() { 
            span.textContent = "New Span content"; 
            el_down.innerHTML = "Span content changed"; 
        }         
    </script> 
</body> 
    
</html>

输出：

JavaScript 更改Span元素的文本

使用HTML DOM innerText属性

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

语法:

Return the text content of a node:

node.innerText

设置节点的文本内容：

node.innerText = text

示例： 这个示例使用 innerText属性 改变内容。

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <title> 
        JavaScript Change the text of a span element 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <span id="GFG_Span"> 
        This is text of Span element. 
    </span> 
  
    <br><br> 
  
    <button onclick="gfg_Run()"> 
        Change 
    </button> 
  
    <p id="GFG_DOWN"></p> 
  
    <script> 
        let span = document.getElementById("GFG_Span"); 
        let el_down = document.getElementById("GFG_DOWN"); 
  
        function gfg_Run() { 
            span.innerText = "New Span content"; 
            el_down.innerHTML = "Span content changed"; 
        }         
    </script> 
</body> 
    
</html>