HTML DOM dl ऑब्जेक्ट

HTML DOM dl ऑब्जेक्ट HTML <dl> तत्व से जुड़ा होता है। <dl> तत्व विवरण सूची (description list) बनाने के लिए होता है। dl ऑब्जेक्ट का उपयोग करके हम JavaScript का उपयोग करके <dl> तत्व को डायनामिकली बना और एक्सेस कर सकते हैं।

सिंटैक्स

विवरण सूची बनाने के लिए सिंटैक्स:

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

उदाहरण

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

<!DOCTYPE html> <html> <body> 
<h2>DL ऑब्जेक्ट उदाहरण</h2> 
<p>नीचे दिए गए बटन पर क्लिक करके एक विवरण सूची बनाएं</p> 
<button onclick="createDiv()">CREATE</button> 
<script> 
  function createDiv() { 
    var Desc = document.createElement("DL"); 
    var DesT = document.createElement("DT"); 
    var tn= document.createTextNode("आम"); 
    DesT.appendChild(tn); 
    var data = document.createElement("DD"); 
    var tn1 = document.createTextNode("आम फलों का राजा है"); 
    data.appendChild(tn1); 
    document.body.appendChild(Desc); 
    Desc.appendChild(DesT); 
    Desc.appendChild(data); 
  } 
</script> </body> </html>

आउटपुट

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

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

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

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

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

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

• createDiv() मेथड document ऑब्जेक्ट के createElement() मेथड का उपयोग करके <dl>, <dt> और <dd> तत्व बनाता है और उन्हें क्रमशः Desc, DesT और data वेरिएबल्स में असाइन करता है। फिर हम createTextNode() मेथड का उपयोग करके <dt> और <dd> तत्व के लिए टेक्स्ट नोड बनाते हैं और appendChild() मेथड का उपयोग करके उन्हें उनके संबंधित तत्वों में जोड़ते हैं।
• अंत में, हम <dt> तत्व को <dl> में और फिर <dd> तत्व को जोड़ते हैं। <dl> तत्व को फिर <dt> और <dd> तत्व के साथ document body में appendChild() मेथड का उपयोग करके जोड़ा जाता है:

function createDiv() { 
  var Desc = document.createElement("DL"); 
  var DesT = document.createElement("DT"); 
  var tn= document.createTextNode("आम"); 
  DesT.appendChild(tn); 
  var data = document.createElement("DD"); 
  var tn1 = document.createTextNode("आम फलों का राजा है"); 
  data.appendChild(tn1); 
  document.body.appendChild(Desc); 
  Desc.appendChild(DesT); 
  Desc.appendChild(data); 
}