Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Details object
The HTML DOM Details object is associated with the HTML <details> element. This can allow us to hide the information that can only be displayed if user wants to see it.
Properties
Following is the property for the Details object −
| Sr.No | Property & Description |
|---|---|
| 1 | open To set or return if the details should be visible to the user or not. |
Syntax
Following is the syntax for −
Creating the Details object −
var p = document.createElement("DETAILS");Example
Let us look at an example for the HTML DOM Details object −
<!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
This will produce the following output −
On clicking the CREATE button and then expanding the details by clicking on the arrow −
In the above example −
We have created a button CREATE that will execute the detCreate() function when clicked by the user −
<button onclick="detCreate()">CREATE</button>
The detCreate() function creates a <details> element using the createElement() method of the document object and assigns it to the variable et. We then create another element <summary> that is a part of the <details> element and is contained inside it by the createElement() method of the docuement object and assigns it to the variable sum.
Then two text nodes sumtxt and txt are created that are appended to <summary> and <details> element respectively. The newly created <summary> element and details element are appended to the document body using the appendChild() method and passing the elements to be appended as parameter −
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);
}
45 Views
