HTML DOM डेटालिस्ट ऑब्जेक्ट HTML5
सिंटैक्स
निम्नलिखित वाक्य रचना है -
डेटालिस्ट ऑब्जेक्ट बनाने के लिए -
var p = document.createElement("DATALIST"); Datalist वस्तु तक पहुँचने के लिए -
var p = document.getElementById("demoDatalist"); उदाहरण
आइए HTML DOM डेटालिस्ट ऑब्जेक्ट के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<title>DATALIST</title>
<style>
button{
margin-top:90px;
}
</style>
</head>
<body>
<h2>Datalist object example</h2>
<p>Click the below button to create a datalist element with options</p>
<form id="FORM1">
</form>
<button onclick="createData()">CREATE</button>
<script>
function createData() {
var i = document.createElement("INPUT");
i.setAttribute("list", "fruits");
document.getElementById("FORM1").appendChild(i);
var y = document.createElement("DATALIST");
y.setAttribute("id", "fruits");
document.getElementById("FORM1").appendChild(y);
var fruit1 = document.createElement("OPTION");
fruit1.setAttribute("value", "mango");
document.getElementById("fruits").appendChild(fruit1);
var fruit2 = document.createElement("OPTION");
fruit2.setAttribute("value", "papaya");
document.getElementById("fruits").appendChild(fruit2);
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
क्रिएट बटन पर क्लिक करने के बाद -
उपरोक्त उदाहरण में -
हमने पहले "FORM1" आईडी के साथ एक खाली फॉर्म बनाया है जिसमें हम बाद में डेटालिस्ट ऑब्जेक्ट का उपयोग करके एक डेटालिस्ट जोड़ देंगे।
<form id="FORM1"></form>
हमने एक बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर createData() फ़ंक्शन को निष्पादित करेगा।
<button onclick="createData()">CREATE</button>
createData () विधि ने पहले दस्तावेज़ ऑब्जेक्ट की createElement () विधि का उपयोग करके एक इनपुट तत्व बनाया और इसे वेरिएबल i को असाइन किया। setAttribute() विधि का उपयोग करके हम सूची विशेषता बनाते हैं और इसे मान फल प्रदान करते हैं। यह सूची विशेषता महत्वपूर्ण है क्योंकि यह हमारे इनपुट बॉक्स को हमारे डेटालिस्ट से जोड़ती है। इसके बाद इनपुट बॉक्स को हमारे फॉर्म में एपेंड चाइल्ड () विधि का उपयोग करके जोड़ा जाता है और इसे पैरामीटर मान के रूप में "FORM1" की आपूर्ति की जाती है।
फिर हम
function createData() {
var i = document.createElement("INPUT");
i.setAttribute("list", "fruits");
document.getElementById("FORM1").appendChild(i);
var y = document.createElement("DATALIST");
y.setAttribute("id", "fruits");
document.getElementById("FORM1").appendChild(y);
var fruit1 = document.createElement("OPTION");
fruit1.setAttribute("value", "mango");
document.getElementById("fruits").appendChild(fruit1);
var fruit2 = document.createElement("OPTION");
fruit2.setAttribute("value", "papaya");
document.getElementById("fruits").appendChild(fruit2);
}