자바 스크립트로 HTML5 입력 목록 값 설정

Question

자바 스크립트로 연결된 데이터리스트로 html5 입력 필드를 생성합니다. 이 DOM 노드를 만드는 데 문제가 없지만 순수 JavaScript를 사용하여 list 속성 값을 설정하는 데 문제가 있습니다. 이것이 가능한가? 나는 노드의 기능을 점검하고 list 값이 있지만, 시도 할 때마다 새로운 값이 지정되지 않습니다. 아무도 아이디어가 있니?

Here의 코드 예입니다.

var _form = document.body.appendChild(document.createElement('form')), 
    _input = _form.appendChild(document.createElement('input')), 
    _datalist = _form.appendChild(document.createElement('datalist')); 

_input.list = 'exampleList'; 
_input.datalist_id = 'exampleList'; 
_input.className = 'getme'; 

_datalist.id = 'exampleList'; 

for (var i = 0; i < 5; i++) { 
    var _option = _datalist.appendChild(document.createElement('option')); 
    switch(i){ 
     case i: 
      _option.value = i; 
      break; 
    }; 
}; 

편집

나는 element.setAttribute(); 방법을 통해이 작업을 수행하는 방법을 발견했다. 예를 들어 element.className = 'value';과 비슷한 구문으로이 작업을 수행하는 방법은 무엇입니까?

미리 감사드립니다.

Answer 1

. 그래서 당신이 붙어있는 것처럼 보입니다 setAttribute()

또한 DOM manipulations come with some performance ovehead에주의해야합니다. 따라서 최소화해야 할 때가 있습니다. 다음과 같은 고려하는 것이 좋습니다 :

이

Demo

Answer 2

사용의 setAttribute() :

var _form = document.body.appendChild(document.createElement('form')), 
    _input = _form.appendChild(document.createElement('input')), 
    _datalist = _form.appendChild(document.createElement('datalist')); 

_input.setAttribute('list','exampleList') 
_input.datalist_id = 'exampleList'; 

_datalist.id = 'exampleList'; 

for (var i = 0; i < 5; i++) { 
    var _option = _datalist.appendChild(document.createElement('option')); 
    _option.text =i; 
}; 

바이올린 : MDN에 직접 그 attridute를 설정할 수있는 속성이 없습니다 따르면 http://jsfiddle.net/bkTxM/2/