add an input in a div with javascript -

i have in html page div shown lightbox:

<div id="container">     <input type="text" id="user_1" name="user_1" value="user_1"/><br>     <input type="text" id="user_2" name="user_2" value="user_2"/><br>     <input type="text" id="user_3" name="user_3" value="user_3"/><br>     <label onclick="add_input();"><img alt="add_other" src="add.png"></label> </div> 

and want when click on image input added , appeared, tried following js function :

function add_input(){         var div = document.getelementbyid('container');         var input = '<input style="width:300px;" type="text" id="user" name="user" value=""/>'         div.innerhtml+= input;     } 

the div id="container" has in css height : auto , after clicking on add image input appear outside lightbox. there other way ?

you're putting input inside container, sounds css issue. perhaps ancestor element limiting height.

wrt function, don't use .innerhtml += "<input...>"

this destructive, , can bad input elements.

instead create dom elements using creation methods:

function add_input(){     var input = document.createelement("input")     input.style="width:300px;"      input.id = input.name = "user";     document.getelementbyid('container').appendchild(input); } 

---

or if you're absolutely set on using html markup, @ least insert in way doesn't destroy , rebuild existing content.

you can .insertadjacenthtml()

function add_input(){     var div = document.getelementbyid('container');     var input = '<input style="width:300px;" type="text" id="user" name="user" value=""/>'     div.insertadjacenthtml("beforeend", input); } 

you'll need shim old firefox.