HTML | DOM Summary Object

Last Updated : 11 Jul, 2025

The DOM Summary Object is used to represent the HTML <summary> element . The Summary element is accessed by getElementById(). Syntax:

document.getElementById("ID");

Where “id” is the ID assigned to the “summary” tag. Example-1:

html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Summary Object</title>
    <style>
        h2 {
            color: green;
            font-size: 35px;
        }
        
        summary {
            font-size: 40px;
            color: #090;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <center>
        <h2>DOM Summary Object </h2>

        <details>
          <!-- assigning id to summary tag. -->
          <summary id="GFG">GeeksforGeeks</summary>
          <p>A computer science portal for geeks</p>
          <div>It is a computer science portal 
            where you can learn programming.</div>
        </details>

        <br>
        <button onclick="myGeeks()">Submit</button>
        <p id="sudo"></p>
        <script>
            function myGeeks() {
                // Accessing summary tag 
                var x = document.getElementById("GFG").innerHTML;
                // display text content present in summary tag
                document.getElementById("sudo").innerHTML = x;
            }
        </script>
    </center>
</body>
</html>

Output: Before Clicking On Button:

After Clicking On Button:

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

html

<!DOCTYPE html> 
<html> 

<head> 
    <title>DOM Summary Object</title> 
    <style> 
       h1  {
         color:green;
         font-size:35px;
         }
        h2 { 
            color: green; 
            font-size: 35px; 
        } 
        
        summary { 
            font-size: 40px; 
            color: #090; 
            font-weight: bold; 
        } 
    </style> 
</head> 

<body> 
    <center> 
       <h1>GeeksForGeeks</h1>
        <h2>DOM Summary Object </h2>
        <br> 
        <button onclick="myGeeks()">Submit</button> 
        <script> 
            function myGeeks() { 
            
        //  Creating details object.    
        var g = document.createElement("DETAILS");
        document.body.appendChild(g);

  //  Creating summary object.
  var summary = document.createElement("SUMMARY");
  var text1 = document.createTextNode("GeeksForGeeks");
  summary.appendChild(text1);

   var para = document.createElement("P");
   var text2 = document.createTextNode(
   "A computer science portal for geeks");
  para.appendChild(text2);

  g.appendChild(summary);
  g.appendChild(para);         
            } 
        </script> 
    </center> 
</body> 

</html>