Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Datalist Object
The HTML DOM Datalist object is associated with the HTML5 <datalist> element.
Syntax
Following is the syntax −
To create Datalist object −
var p = document.createElement("DATALIST");To access Datalist object −
var p = document.getElementById("demoDatalist");Example
Let us look at an example for the HTML DOM Datalist object −
<!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>Output
This will produce the following output −
After clicking on the CREATE button −
In the above example −
We have first created an empty form with id “FORM1” in which we will add a datalist later using the datalist object.
<form id="FORM1"></form>
We have created a button CREATE that will execute the createData() function on being clicked by the user.
<button onclick="createData()">CREATE</button>
The createData() method first created an input element using the createElement() method of the document object and assigns it to variable i. Using the setAttribute() method we create the list attribute and assign it the value fruits. This list attribute is important as it links our input box to our datalist. The input box is then appended to our form using the appendChild() method and supplying it “FORM1” as parameter value.
We then create the <datalist> element and set its id to the same value that we supplied to the input box ie “fruits”. We then create the two <option> elements inside the datalist using the createElement() method and appending those elements to the datalist using the appendChild() method and supplying the id of the datalist to it −
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);
}
160 Views
