Javascriptで入力フィールドをonclickボタンで追加する

Question

私はいつもjqueryや他のjavascriptフレームワークの使用に慣れていましたが、今はフレームワークがありませんので、可能であれば、基本的には

私はより多くのボタンは、私は基本的にはどちらかと上記のような構造全体を作成するより、幅と長さのフィールドを追加する必要がクリックされた追加したときに1が必要なものこの

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

のようなdiv要素を持っていますすべてのdivを追加するか、既存のスパンタグの下にフィールドを挿入するだけです。

私はjqueryやプロトタイプのフレームワークでそれを行う方法を知っていますが、不幸にも私はこのためのフレームワークを使用できません。誰もそれをどうやって考えているのですか？私はこれのために行われたコードを掲示するだろうが、私はどこに遭遇するか知りません。

Answer 1

innerHTMLプロパティを使用してコンテンツを追加できます。あなたのspan要素を囲むdivにid="wrapper"を追加して、あなたはもちろん

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

を行うことができますidを必要としないとdivに到達するために、他のDOMメソッドを使用することができますが、私はidより簡単だを使用して検索しますとクリーナー。ここでは素早くfiddle

あなたのCSSコードをインラインにしてはいけませんし、DOM要素の中に直接javascript呼び出しを添付しないでください。 DOM、Javascript、CSSを分離すると、あなたの人生が楽になります。

Answer 2

ちょうどこのようinnerHTML使用：

はところで、私はあなたが好む場合は、新しいIDを追加することができますid="content"へのdiv class="content"を変更しました。

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

Answer 3

新しい部屋を作成する必要はありません。？。

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) 
} 

デモ：http://jsfiddle.net/nj4N4/7/