HTML DOM Superscript Object

Last Updated : 15 Jun, 2023

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

Syntax:

document.getElementById("id")

Where id is assigned to the <sup> tag.

Example: In this example, we will use DOM Superscript Object

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>
        HTML DOM superscript Object
    </title>
</head>
   
<body style="text-align:center">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM superscript Object</h2>
    <p>A<sup id="sup_scr">computer science</sup>
        portal for geeks.</p>
    <button onclick="Geeks()">Click Here</button>
    <!-- script to set style in superscript object -->
   
    <script>
        function Geeks() {
            let txt = document.getElementById("sup_scr");
            txt.style.color = "green";
        }
    </script>
</body>
   
</html>

Output:

Example 2: Superscript Object can be created by using the document.createElement method.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM superscript Object
    </title>
</head>
 
<body style="text-align:center">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM superscript Object</h2>
    <button onclick="Geeks()">
        Click Here!
    </button>
    <br><br>
    <div>
          A <span id="p"></span> portal for geeks.
    </div>
 
    <script>
        function Geeks() {
            let txt = document.createElement("SUP");
            let t = document.createTextNode("computer science");
            txt.appendChild(t);
            document.getElementById("p").appendChild(txt);
        }
    </script>
</body>
   
</html>