Open In App
Related Articles

HTML DOM Aside Object

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

The DOM Aside Object is used to represent the HTML <Aside> element. The Aside element is accessed by getElementById(). The aside Element is new in HTML 5. 

Syntax:

document.getElementById("ID");

where “id” is the ID assigned to the aside tag. 

Example 1: In this article, we will learn DOM Aside Object.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>HTML DOM Aside Object</title>
    <style>
        .gfg {
            font-size: 30px;
        }
        aside {
            font-size: 40px;
            color: #090;
            font-weight: bold;
        }
        p {
            font-size: 20px;
            margin: 20px 0;
        }
    </style>
</head>
   
<body>
    <!-- Assign ID to the aside tag. -->
    <aside id="GFG">
        <h1>GeeksforGeeks</h1>
        <p>A computer science portal for geeks</p>
    </aside>
    <h2 style="font-size:35px;">DOM Aside object</h2>
    <button onclick="myGeeks()">Submit</button>
    <script>
        function myGeeks() {
           let w = document.getElementById("GFG");
            w.style.color = "red";
        }
    </script>
</body>
   
</html>

                    

Output: 

 

Example 2: Aside Objects can be created by using the document.createElement Method. 

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>HTML DOM Aside Object</title>
    <style>
        .gfg {
            font-size: 30px;
        }
        p {
            font-size: 20px;
            margin: 20px 0;
        }
    </style>
</head>
   
<body>
    <h2 style="font-size:35px;">DOM Aside object</h2>
    <button onclick="myGeeks()">Submit</button>
   
    <script>
        function myGeeks() {
            let w = document.createElement("ASIDE");
            w.setAttribute("id", "GFG");
            document.body.appendChild(w);
           
            let heading = document.createElement("H3");
           
            let text1 =
                document.createTextNode("GeeksForGeeks");
            heading.appendChild(text1);
            document.getElementById("GFG"
            ).appendChild(heading);
           
            let para = document.createElement("P");
           
            let text2 = document.createTextNode(
                "A Computer Science Portal for Geeks.");
            para.appendChild(text2);
            document.getElementById("GFG"
            ).appendChild(para);
        }
    </script>
</body>
   
</html>

                    

Output: 

 

  Supported Browsers: The browser supported by DOM Aside Object are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


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