Генератор полей формы на JS. Как улучшить?

Question

[Петр Волханов]

Хочу сделать простой генератор формы, где можно добавлять только input type="text" и textarea.

Сделал две кнопки, при нажатии на которые добавляются поля:

<input type="button" id="input" value="TextField" onclick="dynamic_field('text',1)" />
				<input type="button" id="textarea" value="TextArea" onclick="dynamic_field('textarea',2)" />

И такой JS код:

function dynamic_field(type,div_no){
		    if(type == 'text'){
		        document.getElementById('dynamic_field_'+div_no).innerHTML='TextField Name : <input type = "text" name="txt_field"> -> your text field has been generated just define name';    
		    }else if (type == 'textarea'){
		        document.getElementById('dynamic_field_'+div_no).innerHTML='TextArea Name : <input type = "text" name="text_area"> -> your text area has been generated just define name';  
		    }else if (type == 'table_name'){
		        document.getElementById('dynamic_field_'+div_no).innerHTML='Table Name : <input type = "text" name="table_name"> -> your table has been generated just define name';    
		    }
		}

Как мне нужно изменить код, чтобы я при нажатии на кнопку 5 раз получил 5 полей формы? Сейчас каждая кнопка реагирует только на первое нажатие клавиши мышки.

Answer 1

[Dmitriy Mozgovoy]

Как улучшить? Поизвращаемся...

<div id="fields">Контейнер полей</div>

     <a onclick="fields.add('input');">Add</a>
     <a onclick="fields.remove();">Remove</a>

var FieldSet=function(container,tagID){
             this.fields=[];
             this.container=(typeof container=='object')?container:document.getElementById(container);
             var id=0;

             this.add=function(type){
                 var template={input:'TextField Name : <input type = "text" name="txt_field"> -> your text field has been generated just define name',
                             textarea:'',
                             table_name:''}[type],
                         wrapper=document.createElement("div");

                 wrapper.innerHTML=template;
                 tagID&&wrapper.setAttribute("id",tagID+(id++));//можно выбросить если не надо id для полей
                 this.container.appendChild(wrapper);
                 this.fields.push(wrapper);
                 return wrapper;
             }

             this.remove=function(index){
                 this.container.removeChild(this.fields.pop());
             }
         }

         var fields=new FieldSet("fields");//id или элемент контейнера для коллекции полей

Answer 2

[Илья Шатохин]

Вместо innerHTML использовать appendChild.

Comments

[Илья Шатохин]

Анатолий K: потому я и дал ссылку на основы, а не написал решение.

[Петр Волханов]

Илья Шатохин Вот, что получилось Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

[Илья Шатохин]

Евгений Привалов: а вы внимательно смотрели пример в документации по ссылке?