HTML DOM Datalist Object
The DOM Datalist Object is used to represent the HTML <Datalist> element. The Datalist element is accessed by getElementById().
Properties: It has an ‘Option’ attribute which is used to return the collection of all options values in a datalist.
Syntax:
document.getElementById("gfg");
Where “gfg” is the ID assigned to the “Datalist” Tag.
Collections:
options: It is used to return the number of options in an <datalist> element.
Example 1: In this example, we will use DOM Datalist Object
HTML
<!DOCTYPE html> < html > < body > < h1 style = "color:green;font-size:39px;" > w3wiki </ h1 > < h2 >DOM Datalist object</ h2 > < form > < label >Your Cars Name: </ label > < input list = "gfg" > < datalist id = "gfg" > < option value = "BMW" > < option value = "Bentley" > < option value = "Mercedes" > < option value = "Audi" > < option value = "Volkswagen" > </ datalist > </ form > < br > < button onclick = "myBeginner()" >Submit</ button > < p id = "sudo" ></ p > < script > function myBeginner() { let g = document.getElementById("gfg").options.length; document.getElementById("sudo").innerHTML = "There are " + g + " options in the list."; } </ script > </ body > </ html > |
Output:
Example 2: In this example, we will HTML DOM Datalist Object.
HTML
<!DOCTYPE html> < html > < body > < h1 style = "color:green;font-size:39px;" > w3wiki </ h1 > < h2 >DOM Datalist object</ h2 > < form id = "GFG" > < b >< label >Your cars name:</ label ></ b > </ form > < br > < button onclick = "myBeginner()" >Submit</ button > < script > function myBeginner() { let g = document.createElement("INPUT"); g.setAttribute("list", "cars"); document.getElementById("GFG").appendChild(g); let f = document.createElement("DATALIST"); f.setAttribute("id", "cars"); document.getElementById("GFG").appendChild(f); let w = document.createElement("OPTION"); w.setAttribute("value", "BMW"); document.getElementById("cars").appendChild(w); let x = document.createElement("OPTION"); x.setAttribute("value", "Mercedes"); document.getElementById("cars").appendChild(x); } </ script > </ body > </ html > |
Output:
Supported Browsers: The browser supported by DOM Datalist Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Contact Us