Как заполнить HTML-список данных значениями массива в JavaScript: методы и примеры

Чтобы заполнить список данных HTML значениями массива в JavaScript, вы можете использовать несколько методов. Вот некоторые из них:

Метод 1. Использование цикла JavaScript и внутреннего HTML:

<input type="text" list="datalist">
<datalist id="datalist"></datalist>
<script>
  var array = ["Value 1", "Value 2", "Value 3", "Value 4"];
  var datalist = document.getElementById("datalist");
  for (var i = 0; i < array.length; i++) {
    datalist.innerHTML += "<option value='" + array[i] + "'>";
  }
</script>

Метод 2. Использование JavaScript createElement и AppendChild:

<input type="text" list="datalist">
<datalist id="datalist"></datalist>
<script>
  var array = ["Value 1", "Value 2", "Value 3", "Value 4"];
  var datalist = document.getElementById("datalist");
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    datalist.appendChild(option);
  }
</script>

Метод 3. Использование свойства option списка данных HTML:

<input type="text" list="datalist">
<datalist id="datalist"></datalist>
<script>
  var array = ["Value 1", "Value 2", "Value 3", "Value 4"];
  var datalist = document.getElementById("datalist");
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.text = array[i];
    datalist.options.add(option);
  }
</script>

Эти методы позволяют динамически заполнять список данных HTML значениями массива с помощью JavaScript. Выберите метод, который лучше всего соответствует вашим требованиям.