อ็อบเจ็กต์ Nav ของ HTML DOM

อ็อบเจ็กต์ Nav ใน HTML DOM แทนองค์ประกอบ <nav> ซึ่งใช้สำหรับส่วนของลิงก์นำทาง (navigation links)

การสร้างองค์ประกอบ <nav>

var navObject = document.createElement("NAV")

ตัวอย่างการใช้งาน

ตัวอย่างนี้สร้างแถบนำทาง (navigation bar) แบบไดนามิกเมื่อผู้ใช้กรอกชื่อลิงก์และกดปุ่ม

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Nav</title>
<style>
  * { padding: 2px; margin:5px; }
  form { width:70%; margin: 0 auto; text-align: center; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-Nav</legend>
      <div id="navbar"></div>
      <input type="text" id="textSelect" placeholder="link name...">
      <input type="button" value="Create Nav Bar" onclick="createNAV()">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var textSelect = document.getElementById("textSelect");
  var navDiv = document.getElementById("navbar");
  function createNAV() {
    if(textSelect.value !== ''){
      textSelect.disabled = true;
      var navObject = document.createElement("NAV");
      navDiv.appendChild(navObject);
      var aElement = document.createElement("A");
      aElement.setAttribute("href", "#");
      var textNode = document.createTextNode(textSelect.value);
      aElement.appendChild(textNode);
      navObject.appendChild(aElement);
    }
    else
      divDisplay.textContent = 'Please Provide a link name';
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

กดปุ่ม "Create Nav Bar" โดยไม่กรอกข้อมูล:

กดปุ่ม "Create Nav Bar" พร้อมกรอกข้อมูล: