HTML DOM Details ऑब्जेक्ट

HTML DOM Details ऑब्जेक्ट HTML <details> तत्व से जुड़ा हुआ है। यह हमें जानकारी छुपाने की अनुमति देता है जिसे केवल तभी प्रदर्शित किया जा सकता है जब उपयोगकर्ता इसे देखना चाहे।

गुण

Details ऑब्जेक्ट के लिए निम्नलिखित गुण है:

सिंटैक्स

Details ऑब्जेक्ट बनाने के लिए सिंटैक्स निम्नलिखित है:

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

उदाहरण

HTML DOM Details ऑब्जेक्ट का एक उदाहरण देखते हैं:

<!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>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

CREATE बटन पर क्लिक करने और फिर तीर पर क्लिक करके विवरण विस्तारित करने पर:

उपरोक्त उदाहरण में:

हमने एक CREATE बटन बनाया जो उपयोगकर्ता द्वारा क्लिक किए जाने पर detCreate() फ़ंक्शन को निष्पादित करेगा:

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

detCreate() फ़ंक्शन document ऑब्जेक्ट के createElement() मेथड का उपयोग करके एक <details> तत्व बनाता है और इसे वेरिएबल et में असाइन करता है। हम फिर एक और तत्व <summary> बनाते हैं जो <details> तत्व का एक हिस्सा है और इसके अंदर समाहित है, document ऑब्जेक्ट के createElement() मेथड का उपयोग करके और इसे वेरिएबल sum में असाइन करता है।

फिर दो टेक्स्ट नोड्स sumtxt और txt बनाए जाते हैं जो क्रमशः <summary> और <details> तत्व में जोड़े जाते हैं। नव निर्मित <summary> तत्व और details तत्व को appendChild() मेथड का उपयोग करके 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); }