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

ออบเจ็กต์ div ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML <div> ซึ่งเป็นองค์ประกอบระดับบล็อก (block-level) สำหรับจัดกลุ่มองค์ประกอบอื่นๆ เพื่อนำไปจัดสไตล์หรือจัดการเป็นกลุ่มภายใต้แท็กหรือ id เดียวกัน

คุณสมบัติ (Properties)

ไวยากรณ์ (Syntax)

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

var divElement = document.createElement("DIV");

ตัวอย่าง

ตัวอย่างการสร้าง div พร้อมข้อความและสไตล์แบบไดนามิก:

<!DOCTYPE html>
<html>
<body>
<h2>ตัวอย่างออบเจ็กต์ div</h2>
<p>คลิกปุ่ม CREATE เพื่อสร้าง div พร้อมข้อความ</p>
<button onclick="createDiv()">CREATE</button>
<script>
  function createDiv() {
    var div = document.createElement("DIV");
    var text = document.createTextNode("Sample Div element");
    div.setAttribute("style", "margin:10px;width:200px;background-color:lightgreen;border:2px solid blue");
    div.appendChild(text);
    document.body.appendChild(div);
  }
</script>
</body>
</html>

ผลลัพธ์

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

เมื่อคลิกปุ่ม จะสร้างกล่อง div สีเขียวอ่อน กรอบสีน้ำเงิน ความกว้าง 200px พร้อมข้อความ "Sample Div element"

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

• สร้างปุ่ม "CREATE" เรียกใช้ createDiv() เมื่อคลิก
• ฟังก์ชัน createDiv() สร้าง <div> เก็บในตัวแปร d
• สร้างโหนดข้อความ "Sample Div element" เก็บใน txt
• ตั้งค่าสไตล์ด้วย setAttribute() รวม margin, width, background-color, border
• ผูกโหนดข้อความเข้ากับ div แล้วต่อท้าย <body>