HTML DOM DT ऑब्जेक्ट

HTML DOM DT ऑब्जेक्ट HTML <dt> तत्व से जुड़ा होता है। DT ऑब्जेक्ट का उपयोग करके हम JavaScript की मदद से <dt> तत्व को डायनामिकली बना सकते हैं।

सिंटैक्स

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

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

उदाहरण

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

<!DOCTYPE html> <html> <body> 
<h2>DT ऑब्जेक्ट उदाहरण</h2> 
<p>नीचे दिए गए बटन पर क्लिक करके DL के अंदर एक DT तत्व बनाएं</p> 
<button onclick="createDT()">CREATE</button> 
<script> 
  function createDT() { 
    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 बटन बनाया जो यूज़र द्वारा क्लिक किए जाने पर createDT() मेथड को एक्ज़िक्यूट करता है:

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

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

function createDT() { 
  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); 
}