Open In App
Related Articles

HTML DOM Span Object

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The DOM span object is used to represent the HTML <span> element. The span element can be accessed by using the getElementById() method. 

Syntax: 

document.getElementById("id"); 

Where ‘id’ is the ID assigned to the span tag.

Example 1: In the below program the content inside the span element is accessed and appended to the paragraph element.  

HTML

<!DOCTYPE html>
<html>
   
<body style="text-align:center">
    <h1 style="color:green; font-size:38px;">
        GeeksForGeeks
    </h1>
    <h2>DOM span Object</h2>
    <p>A computer science portal for
          <span id="span" style="color:green;">geeks</span>.
      </p>
    <button onclick="Geeks()">Click Here!</button>
    <p id="p"></p>
    <script>
        function Geeks() {
            let x = document.getElementById("span").textContent;
            document.getElementById("p").innerHTML = x;
        }
    </script>
</body>
</html>

                    

Output: 

 

Example 2: Span Object can be created by using the document.createElement method. In the below program, a span object is created on click of the button and a text node is appended to it.  

html

<!DOCTYPE html>
<html>
<body>
   
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM span Object</h2>
    <button onclick="myGeeks()">Submit</button>
    <br><br>
    <script>
        <!--Creating span element-->
        function myGeeks() {
            let g = document.createElement("SPAN");
            let f =
                document.createTextNode(
                  "A computer science portal for geeks.");
                g.appendChild(f);
            document.body.appendChild(g);
        }
    </script>
</body>
</html>

                    

Output: 

 

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera


Last Updated : 14 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads