동적으로 <input type = "text"/>을 만드는 방법

Question

웹 양식에 입력 텍스트를 동적으로 만들고 싶습니다. 더 구체적으로, 나는 사용자가 원하는 텍스트 필드의 수를 입력하는 텍스트 필드를 가지고있다; 텍스트 필드가 동일한 양식으로 동적으로 생성되기를 바랍니다.

어떻게하면됩니까? 자바 스크립트와

Answer 1

:

var input = document.createElement("input"); 
input.type = "text"; 
input.className = "css-class-name"; // set the CSS class 
container.appendChild(input); // put it into the DOM 

Answer 2

아마 방법 document.createElement();은 당신이 찾고있는 것입니다.

Answer 3

입력하는 텍스트 필드 수에 따라 루프에서 이와 같은 작업을 수행 할 수 있습니다.

$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform'); 

더 나은 성능을 위해 모든 HTML을 먼저 만들고 DOM에 한 번만 주입하십시오.

var count = 20; 
var html = []; 
while(count--) { 
    html.push("<input type='text' name='name", count, "'>"); 
} 
$('#myform').append(html.join('')); 

편집이 예제는 HTML을 추가 할 jQuery를 사용하지만, 당신은 쉽게뿐만 아니라 innerHTML을을 사용하여 수정할 수 있습니다.

Answer 4

당신은 내가 다음과 같은 링크가 당신을 도울 것입니다 생각 텍스트 상자

Answer 5

를 만드는 createElement() 방법을 사용할 수 있습니다. 필드를 동적으로 생성하고 동시에 필드를 제거하려면 여기에서 도움말을 얻을 수 있습니다. 나는 같은 질문을했다, 그래서 나는 대답

$(function() { 
     var scntDiv = $('#p_scents'); 
     var i = $('#p_scents p').size() + 1; 

     $('#addScnt').live('click', function() { 
       $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
       i++; 
       return false; 
     }); 

     $('#remScnt').live('click', function() { 
       if(i > 2 ) { 
         $(this).parents('p').remove(); 
         i--; 
       } 
       return false; 
     }); 
}); 

http://jsfiddle.net/jaredwilli/tZPg4/4/

Answer 6

비 JQuery와 솔루션이 답변을 참조 있어요. 방금 도와 줬어! 자바 스크립트를 사용

Adding input elements dynamically to form

Answer 7

, 모두 당신이 필요 document.createElement 및 setAttribute입니다.

var input = document.createElement("input"); 
input.setAttribute('type', 'text'); 

그런 다음 appendChild을 사용하여 생성 된 요소를 원하는 부모 요소에 추가 할 수 있습니다.

var parent = document.getElementById("parentDiv"); 
parent.appendChild(input);