Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Div Object
  • Last Updated : 15 Feb, 2019

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.




<!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.




<!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>                    

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :