Adding input fields in Javascript with onclick but

Question

This question already has answers here:

Adding input elements dynamically to form (2 answers)

Closed 5 years ago.

Im always used to using jquery or other javascript frameworks but right now I have no frameworks to use so i wanted to see if anyone knows how i can do this in straight javascript if possible.

Basically i have a div like this

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

<div id="room_fileds">
    <div class='label'>Room 1:</div>
    <div class="content">
        <span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X </span>
        <span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small</span>
    </div>
</div>

What i need one is when the add more button is clicked i need to basically add more width and length fields either creating a entire structure like the one above with all the divs or just inserting new span tag with the fields below the existing ones.

I know how to do it with jquery or prototype framework but unfortunatley I cannot use any frameworks for this. Does anyone have any idea how to do it. I would post code iv done for this but I dont even know where to beging.

Answer 1

You can use the innerHTML property to add content. Add a id="wrapper" to the div surrounding your span elements and then you can do

var dummy = '<span>Label: <input type="text"><small>(ft)</small></span>\r\n';
document.getElementById('wrapper').innerHTML += dummy;      

Of course you don't need the id and can use other DOM methods to get to the div, but I find using ids easier and cleaner. Here's a quick fiddle

Also note that you shouldn't inline your css code, neither attach your javascript calls directly inside the DOM elements. Separating DOM, Javascript and CSS will make your life easier.

Answer 2

Don't need create new room?.

var room = 1;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div>';

    objTo.appendChild(divtest)
}

Demo: http://jsfiddle.net/nj4N4/7/

Answer 3

just use the innerHTML like this:

btw I changed div class="content" to id="content" you can add new id if you prefer.

function add_fields() {
   var d = document.getElementById("content");

   d.innerHTML += "<br /><span>Width: <input type='text'style='width:48px;'value='' /><small>(ft)</small></span> X <span>Length: <input type='text' style='width:48px'  value='' /><small>(ft)</small</span>";
}

DEMO: http://jsbin.com/oxokiq/5/edit