9

私はいつもjqueryや他のJavaScriptフレームワークを使用していましたが、今は使用するフレームワークがないので、可能であればストレートJavaScriptでこれを行う方法を誰かが知っているかどうかを知りたいと思っていました.

基本的に私はこのようなdivを持っています

<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 を含む上記のような構造全体を作成するか、既存のものの下のフィールドに新しいスパン タグを挿入するだけで、幅と長さのフィールドを追加する必要があります。

jqueryまたはプロトタイプフレームワークでそれを行う方法は知っていますが、残念ながら、これにはフレームワークを使用できません。誰もそれを行う方法を知っていますか。私はこれのためにコードivを投稿しますが、どこから始めればよいかさえわかりません。

4

3 に答える 3

15

プロパティを使用してinnerHTMLコンテンツを追加できます。周囲の要素に aid="wrapper"を追加すると、次のことができますdivspan

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

もちろん、 を必要とせず、idにアクセスするために他の DOM メソッドを使用することもできますが、 を使用するdiv方idが簡単でクリーンです。ここに簡単なフィドルがあります

また、CSS コードをインライン化したり、javascript 呼び出しを DOM 要素内に直接アタッチしたりしないでください。DOM、Javascript、CSS を分離すると、作業が楽になります。

于 2013-04-10T18:10:10.003 に答える
8

新しい部屋を作成する必要はありませんか?.

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/

于 2013-04-10T18:25:14.487 に答える