Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Nav Object

  • Last Updated : 28 Jun, 2021

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: 

html




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

html




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

Supported Browsers:

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :