web-dev-qa-db-ja.com

jQueryオブジェクトを複数回追加する

ここで正確に何が起こっているのかわかりません。変数がjqueryオブジェクトであるという事実だと思います。

これは一度だけ追加されます、私の質問はなぜですか？

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);

これは私が想定するように機能しますが

var newInput = '<input>';
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);

ご協力ありがとうございました！

jqueryvariablesobjectappend
16
VIDesignz

$('<input/>')を実行すると、jQueryはinputDOM要素を作成します。

DOM要素を.append()すると、要素が前の位置から切り離されます。 （フィドルを参照） 。から ドキュメント ：

この方法で選択された要素がDOMの他の場所の単一の場所に挿入されると、その要素はターゲットに移動されます（複製されません）。

したがって、2番目の.append()呼び出しは、最初に追加された場所からそれを削除し、新しい位置に配置します。

文字列を追加すると、追加されたとおりにDOM要素が作成されます。

17
Stryner

最初のケースでは、$はhtmlを解析し、HTMLInputElementをラップする新しいjQueryオブジェクトを作成します。

基本的に、それは次のようなものです。

var $newDiv = $('#newDiv'),
    newInput = document.createElement('input');

$newDiv.append(newInput);
$newDiv.append(newInput);

2番目のケースでは、毎回htmlを解析し、インスタンスごとに異なるjQueryオブジェクトを生成します。

最初のサンプルを修正する方法は次のとおりです。

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput.clone());
21
plalx

これは、最初のケースでは同じ要素を参照しているためですobject（同じ要素を追加して新しい場所に追加します）、2番目のケースではhtmlを文字列として追加して複数の要素を追加します（毎回新しい要素）。

1
Ehsan Sajjad

ループを使用して毎回新しい要素を作成することにより、複数の要素を追加できます。

(function(){
  for(var i=0; i<10; i++){
    var newInput = $('<input>');
    $('#newDiv').append(newInput);
}})();
input {border:1px solid red; margin:3px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newDiv"></div>
1
OPTIMUS PRIME