HTML DOM createAttribute() मेथड

HTML DOM createAttribute() मेथड का उपयोग HTML एलिमेंट के लिए JavaScript का उपयोग करके एक विशिष्ट एट्रिब्यूट बनाने के लिए किया जाता है। createAttribute() मेथड दिए गए नाम के साथ एक एट्रिब्यूट बनाता है और एट्रिब्यूट को Attr ऑब्जेक्ट के रूप में वापस करता है।

सिंटैक्स (Syntax)

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

document.createAttribute(attributename)

उदाहरण (Example)

HTML DOM createAttribute() मेथड का एक उदाहरण:

<!DOCTYPE html> <html> <head> <title>CREATE ATTRIBUTE</title> <style> #DIV1 { margin-top: 15px; width: 250px; height: 200px; border: 2px solid blue; background-color: lightgreen; } </style> </head> <body> <p>div एलिमेंट के लिए "class" एट्रिब्यूट बनाने के लिए बटन पर क्लिक करें</p> <button onclick="attrCreate()">CREATE</button> <br> <div> <p>This is a sample div</p> </div> <script> function attrCreate() { var x = document.getElementsByTagName("div")[0]; var att = document.createAttribute("id"); att.value = "DIV1"; x.setAttributeNode(att); } </script> </body> </html>

आउटपुट (Output)

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

HTML DOM createAttribute() मेथड

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

HTML DOM createAttribute() मेथड

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

हमने "DIV1" आईडी के साथ एक स्टाइल बनाया:

#DIV1 { margin-top: 15px; width: 250px; height: 200px; border: 2px solid blue; background-color: lightgreen; }

फिर हमने एक <div> एलिमेंट बनाया जिसके अंदर एक <p> एलिमेंट है:

<div> <p>This is a sample div</p> </div>

फिर, हमने एक CREATE बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर attrCreate() फंक्शन को एक्जीक्यूट करेगा:

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

attrCreate() फंक्शन डॉक्यूमेंट ऑब्जेक्ट पर getElementsByTagName() मेथड का उपयोग करके <div> एलिमेंट को प्राप्त करता है और इसे वेरिएबल x में असाइन करता है। createAttribute() मेथड का उपयोग करके हम "id" एट्रिब्यूट बनाते हैं और इसकी value प्रॉपर्टी का उपयोग करके इसे "DIV1" वैल्यू असाइन करते हैं, जो हमारे द्वारा पहले बनाए गए स्टाइल की आईडी है। अंत में, हम "id" एट्रिब्यूट को इसकी वैल्यू के साथ <div> एलिमेंट पर सेट करते हैं:

function attrCreate() { var x = document.getElementsByTagName("div")[0]; var att = document.createAttribute("id"); att.value = "DIV1"; x.setAttributeNode(att); }