onclick은 텍스트 상자를 만듭니다

Question

이것은 멍청한 질문이지만 어떤 이유로 든 알아낼 수 없거나 간단한 예제를 찾을 수 없습니다. 버튼을 클릭하면 같은 이름의 텍스트 상자가 생성됩니다.

<input type="button" value="Show" onclick="blah" /> 
<!-- Button Gets Clicked --> 
<input type="text" name="added1" /> 
<!-- Button Gets Clicked --> 
<input type="text" name="added2" /> 
<!-- Button Gets Clicked --> 
<input type="text" name="added3" /> 

어쩌면 javascript !? 어떤 아이디어?

HTML :

<input type="button" value="Show" id="add_btn" /> 

Answer 1

인라인 자바 스크립트는 더 나은

<input type="button" value="Show" onclick="var e = document.createElement('input'); e.type='text'; e.name = 'added'+this.rel; this.rel = parseFloat(this.rel)+1; this.parentNode.appendChild(e); return false;" /> 

은 스크립트에서 프리젠 테이션을 분리하는 ...이 접근하는 가장 좋은 방법은 아니지만, 크로스 브라우저 자바 스크립트 :

,

var handler_func = function() { 
    var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0; 
    var e = document.createElement('input'); 
    e.type='text'; 
    e.name = 'added'+i; 
    this.rel = i+1; 
    this.parentNode.appendChild(e); 
    return false;  
} 

var add_btn = document.getElementById('add_btn'); 
if(add_btn.attachEvent) 
     add_btn.attachEvent('onClick', handler_func); 
else if(add_btn.addEventListener) //Firefox & company 
     add_btn.addEventListener('click', handler_func, false); 

바이올린 :