HTML DOM Figcaption ऑब्जेक्ट

HTML DOM Figcaption ऑब्जेक्ट HTML5 <figcaption> तत्व को दर्शाने के लिए उपयोग किया जाता है। आप createElement() और getElementById() मेथड का उपयोग करके क्रमशः एक figcaption तत्व बना या एक्सेस कर सकते हैं।

सिंटैक्स

Figcaption ऑब्जेक्ट बनाने के लिए सिंटैक्स:

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

उदाहरण

आइए Figcaption ऑब्जेक्ट का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> 
<script> 
  function createCaption() { 
    var caption = document.createElement("FIGCAPTION"); 
    var txt = document.createTextNode("जावा सर्वलेट्स सीखें"); 
    caption.appendChild(txt); 
    var f = document.getElementById("Figure1"); 
    f.appendChild(caption); 
  } 
</script> </head> <body> 
<h2>Caption</h2> 
<p>नीचे दिए गए बटन पर क्लिक करके नीचे दी गई इमेज के लिए कैप्शन बनाएं</p> 
<button onclick="createCaption()">CREATE</button> 
<figure id="Figure1"> 
  <img src="https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg" alt="Servlets" width="250" height="200"> 
</figure> 
</body> </html>

आउटपुट

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

HTML DOM Figcaption ऑब्जेक्ट

CREATE बटन पर क्लिक करने पर:

HTML DOM Figcaption ऑब्जेक्ट

उदाहरण की व्याख्या

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

हमने पहले id "Figure1" वाला एक figure तत्व बनाया और इसमें एक img तत्व है:

<figure id="Figure1"> 
  <img src="EiffelTower.jpg" alt="एफिल टॉवर" width="250" height="200"> 
</figure>

फिर हम एक बटन CREATE() बनाते हैं जो यूज़र द्वारा क्लिक किए जाने पर createCaption() मेथड को एक्ज़िक्यूट करेगा:

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

createCaption() मेथड document ऑब्जेक्ट के createElement() मेथड का उपयोग करके एक figcaption तत्व बनाता है। document बॉडी के createTextNode() मेथड का उपयोग करके एक टेक्स्ट नोड बनाया जाता है और इसे figcaption तत्व में जोड़ा जाता है। फिर हम getElementById() मेथड का उपयोग करके figure तत्व को प्राप्त करते हैं और appendChild() मेथड का उपयोग करके टेक्स्ट नोड के साथ figcaption को चाइल्ड तत्व के रूप में जोड़ते हैं:

function createCaption() { 
  var caption = document.createElement("FIGCAPTION"); 
  var txt = document.createTextNode("पेरिस, फ्रांस में एफिल टॉवर"); 
  caption.appendChild(txt); 
  var f = document.getElementById("Figure1"); 
  f.appendChild(caption); 
}