javascript - 创建元素“数据列表”？

Question

如何动态创建数据列表？

能够使用创建元素和附加子项动态创建下拉列表，但正在努力使用数据列表。

 <script>
  let counter = 0;
  function myFunction3() {
    if (counter < 5) {
      counter++;
      /*var text = document.createElement("TEXTAREA");
      text.id = "text" + counter;
      document.body.appendChild(text);*/
      var drdwn = document.createElement("datalist");
      drdwn.id = "drdwn" + counter;
      document.body.appendChild(drdwn);
      var opt1 = document.createElement("option");
      opt1.text = "<";
      opt1.value = "<";
      document.getElementById("drdwn" + counter).appendChild(opt1);
      var opt2 = document.createElement("option");
      opt2.text = ">";
      opt2.value = ">";
      document.getElementById("drdwn" + counter).appendChild(opt2);
      var opt3 = document.createElement("option");
      opt3.text = "=";
      opt3.value = "=";
      document.getElementById("drdwn" + counter).appendChild(opt3);
      /*var value = document.createElement("TEXTAREA");
      value.id = "value" + counter;
      document.body.appendChild(value);*/
    }
  }
</script>

标签： javascripthtml

Answer 1

const options = document.querySelector('.options');
		const datalistCreator = document.querySelector('.datalist-creator');
		const datalistsBlock = document.querySelector('.datalists');
		let counter = 0;

		datalistCreator.addEventListener('click', function() {
			const datalist = document.createElement('datalist');
			const output = document.createElement('input');

			datalist.setAttribute('id', 'datalist' + counter);
			output.setAttribute('list', 'datalist' + counter);
			output.placeholder = 'Datalist of ' + options.value;
			
			for (let i = 0; i < options.value; i++) {
				const option = document.createElement('option');
				option.value = i + 1;
				datalist.appendChild(option)
			}

			datalistsBlock.appendChild(datalist);
			datalistsBlock.appendChild(output);
			counter++;

			return output;
		})

<input type="text" class="options">
<button class="datalist-creator">Create datalist</button>
<div class="datalists"></div>