HTML | DOM Div Object

Last Updated : 20 Nov, 2021

The Div Object in HTML DOM is used to represent the HTML <div> element. This tag is used to specify the container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

Syntax:

The <div> element can be accessed by using getElementById() method.

var x = document.getElementById("myDIV");

The <div> element can be created by using createElement() method.

var x = document.createElement("DIV");

Property Value:

align: It is used to set or return the value of the align attribute of the <div> element. It is not supported in HTML 5. The style.textAlign is used instead of align in HTML 5.

Example 1: Div Object can be accessed by using the document.getElementById() method.

html

<!DOCTYPE html>
<html>
     
<head> 
    <title> 
        HTML DOM Div Object 
    </title> 
</head> 
 
<body style = "text-align:center;"> 
 
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
         
    <div id="div_obj">DOM Div Object</div> 
    <br>
     
    <button onclick = "Geeks()"> 
        Click Here! 
    </button> 
         
    <br><br> 
         
    <div> 
        A <span id = "GFG"></span> portal for geeks. 
    </div>
     
    <!-- script to access div object -->
    <script>
        function Geeks() {
            var dv = document.getElementById("div_obj").innerHTML;
            document.getElementById("GFG").innerHTML = dv;
        }
    </script>
</body>
 
</html>                    

Output:

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

html

<!DOCTYPE html>
<html>
    <head> 
        <title> 
            HTML DOM Div Object 
        </title> 
    </head>
     
    <body style = "text-align:center;"> 
 
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
         
        <h2>DOM Div Object</h2> 
         
        <button onclick = "Geeks()"> 
            Click Here! 
        </button> 
         
        <br><br>
         
        <!-- script to create Div object -->
        <script>
            function Geeks() {
            var x = document.createElement("DIV");
            var t = document.createTextNode("GEEKS_FOR_GEEKS.");
            x.setAttribute("style", "background-color: green;");
            x.appendChild(t);
            document.body.appendChild(x);
            }
        </script>
         
 
    </body>
</html>                    