HTML DOM 데이터 목록 개체

<시간/>

HTML DOM Datalist 개체는 HTML5 요소와 연결됩니다.

구문

다음은 구문입니다 -

Datalist 개체를 생성하려면 -

var p = document.createElement("DATALIST");

데이터 목록 개체에 액세스하려면 -

var p = document.getElementById("demoDatalist");

예시

HTML DOM Datalist 개체에 대한 예를 살펴보겠습니다. -

<!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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 데이터 목록 개체

CREATE 버튼을 클릭한 후 -

HTML DOM 데이터 목록 개체

위의 예에서 -

먼저 데이터 목록 개체를 사용하여 나중에 데이터 목록을 추가할 ID가 "FORM1"인 빈 양식을 만들었습니다.

<form id="FORM1"></form>

사용자가 클릭하면 createData() 함수를 실행할 CREATE 버튼을 만들었습니다.

<button onclick="createData()">CREATE</button>

createData() 메서드는 먼저 문서 객체의 createElement() 메서드를 사용하여 입력 요소를 만들고 변수 i에 할당합니다. setAttribute() 메서드를 사용하여 목록 속성을 만들고 여기에 값fruits를 할당합니다. 이 목록 속성은 입력 상자를 데이터 목록에 연결하므로 중요합니다. 그런 다음 appendChild() 메서드를 사용하여 입력 상자를 양식에 추가하고 매개 변수 값으로 "FORM1"을 제공합니다.

그런 다음 요소를 만들고 해당 id를 입력 상자에 제공한 것과 동일한 값(예:"fruits")으로 설정합니다. 그런 다음 createElement() 메서드를 사용하여 데이터 목록 내부에 두 개의

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);
}