Skip to content
Related Articles

Related Articles

HTML | DOM Ul Object
  • Last Updated : 28 Jan, 2019

The DOM Ul Object is used to represent the HTML <ul> element .the ul element is accessed by getElementById().

Properties:

  • compact: It is used to set or return whether the height of the unordered list would be render smaller than normal, or not.
  • type: It is used to set or return the value of the type attribute of an <ul> element.

    Syntax:

    document.getElementById("ID");

    Where “id” is the ID assigned to the “ul” tag.

    Example-1:






    <!DOCTYPE html>
    <html>
      
    <head>
        <title>DOM ul Object</title>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>DOM ul Object </h2>
        <ul id="Geeks">
            <!-- Assigning id to 'li tag' -->
            <li id="GFG">Geeks</li>
            <li>Sudo</li>
            <li>Gfg</li>
            <li>Gate</li>
            <li>Placement</li>
        </ul>
        <button onclick="myGeeks()">Submit</button>
        <p id="sudo"></p>
        <script>
            function myGeeks() {
                // Accessing 'ul' tag. 
                var g = document.getElementById(
                  "Geeks").id;
                document.getElementById(
                  "sudo").innerHTML = g;
            }
        </script>
    </body>
      
    </html>

    Output:

    Before Clicking On Button :

    After Clicking On Button :

    Example-2 : <ul> Object can be created by using the document.createElement method.




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>DOM ul Object</title>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>DOM ul Object </h2>
        <button onclick="myGeeks()">Submit</button>
        <script>
            function myGeeks() {
                // 'ul' tag Created. 
                var g = document.createElement("UL");
                g.setAttribute("id", "GFG");
                document.body.appendChild(g);
      
                var f = document.createElement("LI");
                var w = document.createTextNode("Geeks");
                f.appendChild(w);
                document.getElementById("GFG").appendChild(f);
      
                var x = document.createElement("LI");
                var y = document.createTextNode("Sudo");
                x.appendChild(y);
                document.getElementById("GFG").appendChild(x);
            }
        </script>
    </body>
      
    </html>

    Output:

    Before Clicking On Button:

    After Clicking On Button:

    Supported Browsers: The browsers supported by DOM Ul Object are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari
    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :