HTML| DOM Variable Object

Last Updated : 18 Jan, 2019

The DOM Variable Object is used to represent HTML <var> element. The var element is accessed by getElementById().

Syntax:

var element = document.getElementById("ID");

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

Example-1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>var tag</title> 
</head> 
<style> 
    body { 
        text-align: center; 
    } 
      
    .sudo { 
        font-size: 40px; 
        font-weight: bold; 
        color: green; 
    } 
      
    .geeks { 
        font-size: 25px; 
        font-weight: bold; 
    } 
</style> 
  
<body> 
    <div class="sudo">GeeksForGeeks</div> 
    <div class="geeks">DOM var Object</div> 
    <var id="GFG">GeeksforGeeks Variable</var> 
    <br> 
    <br> 
    <button onclick="myGeeks()">Submit</button> 
    <script> 
        function myGeeks() { 
            var g = document.getElementById("GFG"); 
            g.style.color = "red"; 
            g.style.fontSize = "25px"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before Clicking On Button:
After Clicking On button:

Example-2: Variable Object can be created by using the document.createElement Method.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>var tag</title> 
</head> 
<style> 
    body { 
        text-align: center; 
    } 
      
    .sudo { 
        font-size: 40px; 
        font-weight: bold; 
        color: green; 
    } 
      
    .geeks { 
        font-size: 25px; 
        font-weight: bold; 
    } 
</style> 
  
<body> 
    <div class="sudo">GeeksForGeeks</div> 
    <br> 
    <div class="geeks">DOM var Object</div> 
    <br> 
    <br> 
    <button onclick="myGeeks()">Submit</button> 
    <script> 
        function myGeeks() { 
            var g = document.createElement("VAR"); 
            var text = document.createTextNode("GeeksForGeeks Variable"); 
            g.appendChild(text); 
            document.body.appendChild(g); 
        } 
    </script> 
</body> 
  
</html>                