HTML DOM div ऑब्जेक्ट

HTML DOM div ऑब्जेक्ट HTML <div> तत्व से जुड़ा होता है। Div एक सामान्य उद्देश्य का ब्लॉक-लेवल तत्व है जो हमें तत्वों को एक साथ समूहित करने की अनुमति देता है ताकि उन पर स्टाइल लागू किया जा सके या HTML तत्वों के समूह को एक ही टैग नाम या id के तहत मैनिपुलेट किया जा सके।

गुण (Properties)

div ऑब्जेक्ट के लिए निम्नलिखित गुण है:

सिंटैक्स

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

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

उदाहरण

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

<!DOCTYPE html> <html> <body> 
<h2>Div ऑब्जेक्ट उदाहरण</h2> 
<p>CREATE बटन पर क्लिक करके इसमें कुछ टेक्स्ट के साथ एक div तत्व बनाएं।</p> 
<button onclick="createDiv()">CREATE</button> 
<script> 
  function createDiv() { 
    var d = document.createElement("DIV"); 
    var txt = document.createTextNode("नमूना Div तत्व"); 
    d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue"); 
    d.appendChild(txt); 
    document.body.appendChild(d); 
  } 
</script> </body> </html>

आउटपुट

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

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

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

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

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

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

• createDiv() फंक्शन एक <div> तत्व बनाता है और इसे वेरिएबल d में असाइन करता है। फिर यह एक टेक्स्ट नोड बनाता है और इसे वेरिएबल txt में असाइन करता है। फिर हम setAttribute() मेथड का उपयोग करके <div> तत्व के attribute सेट करते हैं। टेक्स्ट नोड को फिर appendChild() मेथड का उपयोग करके <div> तत्व में जोड़ा जाता है। टेक्स्ट नोड के साथ <div> तत्व को फिर दस्तावेज़ बॉडी के चाइल्ड के रूप में जोड़ा जाता है:

function createDiv() { 
  var d = document.createElement("DIV"); 
  var txt = document.createTextNode("नमूना Div तत्व"); 
  d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue"); 
  d.appendChild(txt); 
  document.body.appendChild(d); 
}