HTML DOM Summary ऑब्जेक्ट

HTML DOM Summary ऑब्जेक्ट HTML दस्तावेज़ के <summary> एलिमेंट को दर्शाता है।

आइए अब देखते हैं कि summary ऑब्जेक्ट कैसे बनाया जाता है:

सिंटैक्स

निम्नलिखित सिंटैक्स है:

document.createElement("SUMMARY");

उदाहरण

आइए HTML DOM Summary ऑब्जेक्ट का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> 
    body { 
        text-align: center; 
        background-color: #fff; 
        color: #0197F6; 
    } 
    h1 { 
        color: #23CE6B; 
    } 
    .btn { 
        background-color: #fff; 
        border: 1.5px dashed #0197F6; 
        height: 2rem; 
        border-radius: 2px; 
        width: 60%; 
        margin: 2rem auto; 
        display: block; 
        color: #0197F6; 
        outline: none; 
        cursor: pointer; 
    } 
</style> </head> <body> 
<h1>DOM summary Object Demo</h1> 
<button onclick="createSummary()" class="btn">Create a summary object</button> 
<script> 
    function createSummary() { 
        var details = document.createElement("DETAILS"); 
        var summary = document.createElement("SUMMARY"); 
        var para = document.createElement("P"); 
        var paraTxt = document.createTextNode("- I'm para element"); 
        para.appendChild(paraTxt); 
        var summaryTxt = document.createTextNode("I'm summary element"); 
        summary.appendChild(summaryTxt); 
        details.appendChild(summary); 
        details.appendChild(para); 
        document.body.appendChild(details); 
    } 
</script> </body> </html>

आउटपुट

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

Create a summary object बटन पर क्लिक करके summary ऑब्जेक्ट बनाएं:

दिखाने के लिए क्लिक करें: