Skip to content
Related Articles

Related Articles

HTML | DOM Nav Object
  • Last Updated : 22 Jan, 2019

The DOM nav object is used to represent the HTML <nav> element. The<nav> element is accessed by getElementById().

Syntax:

document.getElementById("id") 

Where id is assigned to the <nav> tag.

Note: The Nav Object is not supported by Internet Explorer 8 and earlier versions.

Example 1:






<!DOCTYPE html> 
<html
  
<head>
    <title>
        HTML DOM Nav Object
    </title>
</head>
  
<body
    <h1
        GeeksforGeeks 
    </h1
      
    <h2>HTML DOM nav Object</h2
  
    <nav id = "nav_object">
        <a href="#">Data Structure</a> |
        <a href="#">Algorithm</a> |
        <a href="#">Programming Languages</a>
    </nav>
      
    <br>
      
    <button onclick = "Geeks()">
        Click Here!
    </button>
          
    <p id = "sudo"></p>
          
    <script>
        function Geeks() {
            var obj = document.getElementById("nav_object").innerHTML;
            document.getElementById("sudo").innerHTML = obj;
        }
    </script>
</body
  
</html>                    

Output:
Before click on the button:
nav
After click on the button:
nav

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




<!DOCTYPE html> 
<html
      
    <head>
        <title>
            HTML DOM nav Object
        </title>
    </head>
    <body
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
          
        <h2>DOM nav Object</h2
  
        <button onclick = "Geeks()">
            Click Here!
        </button>
          
        <br><br>
          
        <script>
            function Geeks() {
                var ele = document.createElement("NAV"); 
                document.body.appendChild(ele);
                  
                var a = document.createElement("A");
                a.setAttribute("href", "/html");
                var txt = document.createTextNode("Home");
                a.appendChild(txt);
                  
                ele.appendChild(a);
            }
        </script>
    </body
</html>                    

Output:
Before click on the button:
nav
After click on the button:
nav

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :