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);
}