एचटीएमएल डोम डिव ऑब्जेक्ट

<घंटा/>

HTML DOM डिव ऑब्जेक्ट HTML

एलिमेंट से जुड़ा है। Div एक सामान्य उद्देश्य ब्लॉक स्तर का तत्व है जो हमें तत्वों को एक साथ समूहित करने की अनुमति देता है ताकि या तो उन पर शैली लागू हो या HTML तत्वों के समूह को एक टैग नाम या आईडी के तहत हेरफेर किया जा सके।

गुण

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

<वें शैली ="चौड़ाई:85.8503%; पाठ-संरेखण:केंद्र;">विवरण

संपत्ति
Align	तत्व के संरेखण विशेषता मान को सेट या वापस करने के लिए। यह गुण HTML5 में समर्थित नहीं है, इसके बजाय संरेखित करने के लिए css का उपयोग करें।

सिंटैक्स

−

. के लिए वाक्य रचना निम्नलिखित है

एक डिव ऑब्जेक्ट बनाना -

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

उदाहरण

आइए HTML DOM डिव ऑब्जेक्ट के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<body>
<h2>Div object example</h2>
<p>click on the CREATE button to create a div element with some text in it.</p>
<button onclick="createDiv()">CREATE</button>
<script>
   function createDiv() {
      var d = document.createElement("DIV");
      var txt = document.createTextNode("Sample Div element");
      d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
      d.appendChild(txt);
      document.body.appendChild(d);
   }
</script>
</body>
</html>

आउटपुट

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

एचटीएमएल डोम डिव ऑब्जेक्ट

क्रिएट बटन पर क्लिक करने पर -

एचटीएमएल डोम डिव ऑब्जेक्ट

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

हमने सबसे पहले एक बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर createDiv () विधि को निष्पादित करेगा -

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

createDiv() फ़ंक्शन एक

तत्व बनाता है और इसे वेरिएबल d को असाइन करता है। यह तब एक टेक्स्ट नोड बनाता है और इसे वेरिएबल txt को असाइन करता है। फिर हम setAttribute () विधि का उपयोग करके

तत्व विशेषताएँ सेट करते हैं। इसके बाद टेक्स्ट नोड को

एलिमेंट में एपेंड चाइल्ड () विधि का उपयोग करके जोड़ा जाता है। टेक्स्ट नोड के साथ

तत्व को फिर दस्तावेज़ बॉडी चाइल्ड के रूप में जोड़ा जाता है -

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