ออบเจ็กต์ HTML DOM Details

ออบเจ็กต์ Details ของ HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML <details> ช่วยให้เราสามารถซ่อนข้อมูลที่จะแสดงก็ต่อเมื่อผู้ใช้ต้องการดู

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

ไวยากรณ์ (Syntax)

var p = document.createElement("DETAILS");

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <body> 
<h2>Details object</h2> 
<p>Click the below button to create a DETAILS element about a monument</p> 
<button onclick="detCreate()">CREATE</button> 
<br><br> 
<script> 
  function detCreate() { 
    var et = document.createElement("DETAILS"); 
    var sum=document.createElement("SUMMARY"); 
    var sumText=document.createTextNode("Eiffel Tower"); 
    var txt = document.createTextNode("It is one of the most popular monument in the world"); 
    sum.appendChild(sumText); 
    et.appendChild(txt); 
    document.body.appendChild(sum); 
    document.body.appendChild(et); 
  } 
</script> </body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิก CREATE แล้วขยายรายละเอียดโดยคลิกที่ลูกศร:

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

สร้างปุ่ม CREATE ทำงาน detCreate() เมื่อคลิก:

<button onclick="detCreate()">CREATE</button>

detCreate() สร้าง <details> element ด้วย createElement() เก็บในตัวแปร et สร้าง <summary> (เป็นส่วนหนึ่งของ <details>) เก็บใน sum สร้าง text node 2 ตัว sumText และ txt เพิ่มเข้า <summary> และ <details> ตามลำดับ เพิ่ม <summary> และ <details> ใหม่เข้า document body:

function detCreate() { 
  var et = document.createElement("DETAILS"); 
  var sum=document.createElement("SUMMARY"); 
  var sumText=document.createTextNode("Eiffel Tower"); 
  var txt = document.createTextNode("It is one of the most popular monument in the world"); 
  sum.appendChild(sumText); 
  et.appendChild(txt); 
  document.body.appendChild(sum); 
  document.body.appendChild(et); 
}