Question

I have a javascript function which adds a div with three inputs to the page and a link to add more inputs to the same div (Imagine that user doesn’t know how many fields there will be so he can add them dynamically).

var div=document.createElement("div");
div.innerHTML='<input type="text" name="question" /><br><br>'+
              '<input type="text" name="input1"/><br />'+
              '<input type="text" name="input2"/><br />'+
              '<a href="javascript:addInput()">Add input field</a>';

var parent_div=document.getElementById('dinamicni_div');
parent_div.appendChild(div);

How could I now implement this addInput() function to add an input below the last input (currently input2) in the same div (but above the link)?

Just to make clear – I have two JS functions to generate content dynamically: addDiv(), which you can see above shortened out; and addInput() which I would like to implement and it should add one input in the current div, where the link was clicked.

Answer 1

You could add a div that contains the input fields inside the div you created, then it would be easy to add new elements to it by appending childs as you did before.