HTML DOM createElement() मेथड

HTML DOM createElement() मेथड का उपयोग JavaScript का उपयोग करके HTML एलिमेंट को डायनामिकली बनाने के लिए किया जाता है। यह पैरामीटर के रूप में एलिमेंट नेम लेता है और उस एलिमेंट नोड को बनाता है। नए बने एलिमेंट को DOM के हिस्से के रूप में रखने के लिए आपको appendChild() मेथड का उपयोग करना होगा।

सिंटैक्स (Syntax)

createElement() मेथड का सिंटैक्स:

document.createElement(nodename)

उदाहरण (Example)

createElement() मेथड का एक उदाहरण:

<!DOCTYPE html> <html> <body> <h1>createElement() example</h1> <p>अधिक बटन बनाने के लिए नीचे दिए गए बटन पर क्लिक करें</p> <button onclick="createButton()">CREATE</button> <br><br> <script> var i = 0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML = "BUTTON" + i; var br = document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); } </script> </body> </html>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

HTML DOM createElement() मेथड

CREATE बटन पर तीन बार क्लिक करने पर। एक क्लिक एक बटन के लिए:

HTML DOM createElement() मेथड

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

हमने एक CREATE बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर createButton() मेथड को एक्जीक्यूट करेगा:

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

createButton() फंक्शन डॉक्यूमेंट ऑब्जेक्ट के createElement() मेथड का उपयोग करके एक <button> एलिमेंट बनाता है। innerHTML का उपयोग करके हम वह टेक्स्ट सेट करते हैं जो बटन के ऊपर प्रदर्शित होगा। हम डॉक्यूमेंट ऑब्जेक्ट के createElement() मेथड का उपयोग करके एक और एलिमेंट <br> बनाते हैं। <button> एलिमेंट और <br> एलिमेंट को फिर appendChild() मेथड का उपयोग करके डॉक्यूमेंट बॉडी में जोड़ा जाता है:

var i = 0; function createButton() { i++; var btn = document.createElement("BUTTON"); btn.innerHTML = "BUTTON" + i; var br = document.createElement("BR"); document.body.appendChild(btn); document.body.appendChild(br); }