以下是一个简单的例子，演示如何使用 JavaScript 操控 <datalist> 元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataList Object Example</title>
</head>
<body>
<label for="fruit">Choose a fruit:</label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
<option value="Grapes">
<option value="Mango">
</datalist>
<script>
// 获取 datalist 元素
var datalistElement = document.getElementById('fruits');
// 添加新的选项
var newOption = document.createElement('option');
newOption.value = 'Strawberry';
datalistElement.appendChild(newOption);
// 或者，通过innerHTML添加多个选项
datalistElement.innerHTML += '<option value="Pineapple"></option>';
datalistElement.innerHTML += '<option value="Watermelon"></option>';
</script>
</body>
</html>
在这个例子中，我们首先通过 getElementById 获取了一个具有特定 id（"fruits"）的 <datalist> 元素。然后，我们通过创建新的 <option> 元素，并设置其 value 属性，将新选项添加到 <datalist> 元素中。另外，我们还展示了使用 innerHTML 属性添加多个选项的方法。
通过 JavaScript 操控 <datalist> 元素，你可以在用户输入时提供自定义的预定义选项，使得用户能够更方便地选择输入内容。
转载请注明出处：http://www.zyzy.cn/article/detail/6201/JavaScript 和 HTML DOM