एचटीएमएल डोम डीएल वस्तु

<घंटा/>

HTML DOM dl ऑब्जेक्ट HTML

एलिमेंट से जुड़ा है।

तत्व विवरण सूची बनाने के लिए है। dl ऑब्जेक्ट का उपयोग करके हम जावास्क्रिप्ट का उपयोग करके

तत्व को गतिशील रूप से बना और एक्सेस कर सकते हैं।

सिंटैक्स

−

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

विवरण सूची बनाना -

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

उदाहरण

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

<!DOCTYPE html>
<html>
<body>
<h2>Div object example</h2>
<p>Create a div by clicking the below button</p>
<button onclick="createDiv()">CREATE</button>
<script>
   function createDiv() {
      var Desc = document.createElement("DL");
      var DesT = document.createElement("DT");
      var tn= document.createTextNode("Mango");
      DesT.appendChild(tn);
      var data = document.createElement("DD");
      var tn1 = document.createTextNode("Mango is the king of fruits");
      data.appendChild(tn1);
      document.body.appendChild(Desc);
      Desc.appendChild(DesT);
      Desc.appendChild(data);
   }
</script>
</body>
</html>

आउटपुट

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

एचटीएमएल डोम डीएल वस्तु

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

<सुप> एचटीएमएल डोम डीएल वस्तु

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

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

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

createDiv () विधि दस्तावेज़ ऑब्जेक्ट की createElement () विधि का उपयोग करके एक

और

तत्व बनाती है और तत्वों को क्रमशः Desc, DesT और डेटा वेरिएबल में शामिल करती है। फिर हम createTextNode () विधि का उपयोग करके

और

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

अंत में, हम

तत्व को और फिर तत्व में जोड़ते हैं। तब तत्व को और तत्व के साथ संलग्न किया जाता है, परिशिष्ट चाइल्ड () विधि का उपयोग करके दस्तावेज़ निकाय में - function createDiv() { var Desc = document.createElement("DL"); var DesT = document.createElement("DT"); var tn= document.createTextNode("Mango"); DesT.appendChild(tn); var data = document.createElement("DD"); var tn1 = document.createTextNode("Mango is the king of fruits"); data.appendChild(tn1); document.body.appendChild(Desc); Desc.appendChild(DesT); Desc.appendChild(data); }