자바 동적으로 값이있는 텍스트 상자 추가

Question

저는 javascript를 처음 사용했습니다. 나는

 <script type="text/javascript"> 
      function ajax(){ 
       var x = document.getElementById("ajax").innerHTML; 
       x= x + '<input name="reference[]" type="text" />'; 
       document.getElementById("ajax").innerHTML = x; 
      } 
     </script> 

이 클릭 이벤트 상입니다 .. 실행시에 동적으로 여러 텍스트 상자를 추가하려합니다. 여기서 문제는 새로운 텍스트 상자를 추가 할 때마다 이전 텍스트 상자의 값이 사라지고 함수가 호출 될 때마다 모든 텍스트 상자가 비어 있다는 것입니다.

document.getElementById("ajax").innerHTML += x; 

덮어 쓰기

document.getElementById("ajax").innerHTML = x; 

사용이

<script type="text/javascript"> 
      function ajax(){ 
       var x = '<input name="reference[]" type="text" />'; 
       document.getElementById("ajax").innerHTML += x; 
      } 
</script> 

Answer 1

나는 document.createElement 01을 사용하는 것이 좋습니다 것입니다 :

Answer 2

추가] 기존 콘텐츠에

추가]를 덮어 쓰기하지 innerHTML을 표준화하는 HTML5의 최소한의 시도에도 불구하고

function ajax() { 
    var textBox = document.createElement('input'); 
    textBox.name = 'reference[]'; 
    textBox.type = 'text'; 
    document.getElementById("ajax").appendChild(textBox); 
}