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.

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.

• javascript
• html
• addition

• Could we see the function you're trying to improve? – David Thomas Commented Apr 21, 2012 at 19:48
• It's not implemented yet, but now that I've gotten the tips I'm off to implementing it :) – c0dehunter Commented Apr 21, 2012 at 19:56

4 Answers 4

Try

document.getElementById('yourdiveID').innerHTML += "<input type='text' value='' /><br />";

It will add at the end of the div.

give your link a class or id and insert using this method: http://api.jquery./insertBefore/

edit:

i agree, the question was not about jquery, yet the asker hinted, that his requirements would allow for it, and for pleteness sake, here is the code in jquery (to take the posters unjustified intimidation of learning jquery)

function createInputMethod(){
    return $('<input type="text" name="question" /><br><br>'+
              '<input type="text" name="input1"/><br />'+
              '<input type="text" name="input2"/><br />');
}

var div = $("<div/>");
div.append(createInputMethod());
div.append($('<a href="javascript:addInput()" id="btn">Add input field</a>');
var parent_div=$('dinamicni_div');
div.appendTo(parent_div);

function addInput(){
   createInputMethod().insertBefore("#btn");
}

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.

I would do something like this. Get all the inputs. Count number of inputs and add using jquery after method. Code is something like this:

function addInputMethod() {

    var len = $('div').find('input').length;


    $('input:nth-child(' + len + ')').after('<input type="text" name="input' + (len + 1) +'"/><br />'); 
}

EDIT

If you do not have an id for div you can change length to this

var len = $(this).parent().find('input').length;

Also change the second line to

$(this).parent().find('input:nth-child...