ออบเจ็กต์ Footer ใน HTML DOM

ออบเจ็กต์ Footer ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML5 <footer> เป็น semantic tag ใช้สำหรับสร้างและเข้าถึง footer แบบไดนามิกด้วย createElement() และ getElementById()

ไวยากรณ์ (Syntax)

การสร้างออบเจ็กต์ footer:

var footer = document.createElement("FOOTER");

ตัวอย่าง

ตัวอย่างการสร้าง footer พร้อมข้อความลิขสิทธิ์:

<!DOCTYPE html>
<html>
<head>
<script>
  function createFoot() {
    var footer = document.createElement("FOOTER");
    document.body.appendChild(footer);
    
    var p = document.createElement("P");
    var text = document.createTextNode("Copyright ©, 2019");
    p.appendChild(text);
    footer.appendChild(p);
  }
</script>
</head>
<body>
<h1>ตัวอย่างออบเจ็กต์ Footer</h1>
<p>คลิกปุ่มด้านล่างเพื่อสร้าง footer สำหรับหน้านี้</p>
<button onclick="createFoot()">CREATE</button>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "CREATE"

เมื่อคลิกปุ่ม "CREATE" จะสร้าง footer ที่ด้านล่างมีข้อความ "Copyright ©, 2019"

คำอธิบายโค้ด

• สร้างปุ่ม "CREATE" เรียกใช้ createFoot() เมื่อคลิก
• ฟังก์ชัน createFoot() สร้าง <footer> เก็บใน footer แล้วต่อท้าย <body>
• สร้าง <p> และโหนดข้อความ "Copyright ©, 2019" ผูกเข้าด้วยกัน
• ต่อท้าย <p> เข้า <footer>
• <footer> เป็น semantic element ของ HTML5 ใช้สำหรับส่วนท้ายของ section หรือ page