2

ページに 3 つの入力を持つ div を追加する JavaScript 関数と、同じ div にさらに入力を追加するためのリンクがあります (ユーザーがフィールドがいくつあるかわからないので、動的に追加できると想像してください)。

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

この addInput() 関数を実装して、同じ div (ただしリンクの上)の最後の入力 (現在はinput2 ) の下に入力を追加するにはどうすればよいですか?

明確にするために、コンテンツを動的に生成する 2 つの JS 関数があります。および addInput() を実装したいので、リンクがクリックされた現在の div に 1 つの入力を追加する必要があります。

4

4 に答える 4

5

試す

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

divの最後に追加されます。

于 2012-04-21T19:50:57.607 に答える
3

リンクにクラスまたは ID を指定し、次のメソッドを使用して挿入します: http://api.jquery.com/insertBefore/

編集：

私は同意します、質問はjqueryに関するものではありませんでしたが、質問者は彼の要件がそれを可能にすることをほのめかしました、そして完全を期すために、ここにjqueryのコードがあります（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");
}
于 2012-04-21T19:50:54.550 に答える
1

作成した div 内に入力フィールドを含む div を追加すると、以前と同様に子を追加することで新しい要素を簡単に追加できます。

于 2012-04-21T19:49:15.733 に答える
1

私はこのようなことをします。すべての入力を取得します。入力の数をカウントし、jqueryafterメソッドを使用して追加します。コードは次のようなものです。

function addInputMethod() {

    var len = $('div').find('input').length;


    $('input:nth-child(' + len + ')').after('<input type="text" name="input' + (len + 1) +'"/><br />'); 
}

編集

idforがない場合は、div長さをこれに変更できます

var len = $(this).parent().find('input').length;

また、2行目を次のように変更します

$(this).parent().find('input:nth-child...

于 2012-04-21T20:00:35.590 に答える