JavaScript: add input element to current div

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.

It's not implemented yet, but now that I've gotten the tips I'm off to implementing it :) — c0dehunter
– c0dehunter, Commented Apr 21, 2012 at 19:56

Shehzad · Accepted Answer · 2012-04-21 19:50:57Z

5

Try

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

It will add at the end of the div.

answered Apr 21, 2012 at 19:50

Shehzad

2,95219 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

c0dehunter Over a year ago

This method will add input AFTER the link and I want it before - except if the inputs are in their own div. Thanks

mindandmedia · Accepted Answer · 2012-04-21 20:05:36Z

3

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

edit:

i agree, the question was not about jquery, yet the asker hinted, that his requirements would allow for it, and for completeness 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");
}

edited Apr 21, 2012 at 20:05

answered Apr 21, 2012 at 19:50

mindandmedia

6,8551 gold badge26 silver badges33 bronze badges

3 Comments

Andrew Whitaker Over a year ago

Do you see jQuery mentioned at all in the question?

c0dehunter Over a year ago

It is jQuery indeed but still thanks for mentioning it, it looks nice and I should learn jQuery :)

mindandmedia Over a year ago

@AndrewWhitaker, no, but i still liked the odds

Juan Alberto López Cavallotti · Accepted Answer · 2012-04-21 19:49:15Z

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.

answered Apr 21, 2012 at 19:49

Juan Alberto López Cavallotti

4,7143 gold badges27 silver badges44 bronze badges

3 Comments

c0dehunter Over a year ago

Thanks, this would be the most elegant answer from my point of view. I'll use either this or jQuery solution.

Juan Alberto López Cavallotti Over a year ago

You can combine the layout and jQuery to make it simple and elegant :)

c0dehunter Over a year ago

Well using jQuery won't be as simple as I worked with it briefly a couple of years ago :)

Anji · Accepted Answer · 2012-04-21 20:38:15Z

1

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...

edited Apr 21, 2012 at 20:38

answered Apr 21, 2012 at 20:00

Anji

7231 gold badge10 silver badges27 bronze badges

4 Comments

c0dehunter Over a year ago

One question though - since I have many of these div's containing these inputs, how could I know from which one of them was I redirected to function (in which the link was clicked)?

c0dehunter Over a year ago

Anji, I think something is wrong with the first line (of your update). It causes an error. Are you sure it's OK?

Anji Over a year ago

@PrimožKralj edited. I had an extra parenthesis. Thanks for finding it.

c0dehunter Over a year ago

Thank you, you've helped alot.

Collectives™ on Stack Overflow

JavaScript: add input element to current div

4 Answers 4

1 Comment

3 Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related