HTML DOM Figure ऑब्जेक्ट

HTML DOM Figure ऑब्जेक्ट HTML <figure> तत्व को दर्शाने के लिए उपयोग किया जाता है। हम figure ऑब्जेक्ट का उपयोग करके डायनामिकली एक figure तत्व बना और एक्सेस कर सकते हैं।

सिंटैक्स

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

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

उदाहरण

Figure ऑब्जेक्ट कैसे बना सकते हैं:

<!DOCTYPE html> <html> <head> 
<script> 
  function createFigure(){ 
    var fig = document.createElement("FIGURE"); 
    fig.setAttribute("id", "Figure1"); 
    document.body.appendChild(fig); 
    var i = document.createElement("IMG"); 
    i.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servletsmini-logo.jpg"); 
    i.setAttribute("width", "250"); 
    i.setAttribute("height", "200"); 
    i.setAttribute("alt", "एफिल टॉवर"); 
    fig.appendChild(i); 
  } 
</script> </head> <body> 
<h2>HTML DOM figure ऑब्जेक्ट</h2> 
<button onclick="createFigure()">CREATE</button><br><br> 
</body> </html>

आउटपुट

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

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

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

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

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

<button onclick="createFigure()">CREATE</button><br><br>

• createFigure() फंक्शन document ऑब्जेक्ट के createElement() मेथड का उपयोग करके figure तत्व बनाता है। setAttribute() का उपयोग करके, हम figure तत्व की id सेट करते हैं और अंत में appendChild() मेथड का उपयोग करके इसे दस्तावेज़ के बॉडी में जोड़ते हैं। फिर हम figure तत्व के अंदर इमेज डालने के लिए img तत्व बनाते हैं।
• setAttribute() मेथड का उपयोग करके हम img तत्व के src, width, height और alt मान सेट करते हैं। अंत में img तत्व को appendChild() मेथड का उपयोग करके figure तत्व के चाइल्ड के रूप में जोड़ा जाता है:

function createFigure(){ 
  var fig = document.createElement("FIGURE"); 
  fig.setAttribute("id", "Figure1"); 
  document.body.appendChild(fig); 
  var i = document.createElement("IMG"); 
  i.setAttribute("src", "EiffelTower.jpg"); 
  i.setAttribute("width", "250"); 
  i.setAttribute("height", "200"); 
  i.setAttribute("alt", "एफिल टॉवर"); 
  fig.appendChild(i); 
}