HTML | DOM Nav Object
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:
After click on the button:
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:
After click on the button:
Supported Browsers:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari
Please Login to comment...