jQueryネストが追加されます

Question

jQueryで追加をネストすることは可能ですか？

私はこれを実行しようとしました：

var div = $('#ui-container'); 
var div2 = div.append($('<div/>').addClass('second')); 
var div3 = div2.append($('<div/>').addClass('third')); 

私はこれ欲しい：

<div id='ui-container'> 
    <div class='second'> 
    <div class='third'></div> 
    </div> 
</div> 

をしかし、私はこれを取得：

<div id='ui-container'> 
    <div class='second'></div> 
    <div class='third'></div> 
</div> 

Answer 1

あなたは以下のようにそれをしなければならない、

var div = $('#ui-container'); 
var div2 = $('<div/>').addClass('second').appendTo(div); 
var div3 = div2.append($('<div/>').addClass('third')); 

を.appendTo()とします。 .append()は、追加関数が呼び出されたオブジェクトを返します。そのため、あなたはそのような結果をあなたのケースで見ているのです。

Answer 2

試してみてください。

var div = $('#ui-container'); 
var div2 = $('<div/>').addClass('second'); 
div2.append($('<div/>').addClass('third')); 
div.append(div2); 

Answer 3

jqueryのメソッドは通常、彼らが呼ばれているDOMノードを返します。

したがって

var div2 = div.append($('<div/>').addClass('second')); // returns $('#ui-container') 

また、そのような$divとして$でDOM要素を参照するための標準です。ここで

が冗長ソリューションです

// Grab container 
$div = $('#ui-container'); 
// Create first child 
var div2 = '<div class="second"></div>' 
// Append .second to #ui-container 
$div.append(div2); 

// Grab .second from the DOM 
var $div2 = $('.second'); 
// Create grandchild element 
var div3 = '<div class="third"></div>' 
// Append to .second 
$div2.append(div3) 

codepen

Answer 4

@Rajaprabhu Aravindasamyは、正しい答えを持っています。少し深めて、jsfiddleを追加すると思った。

appendの代わりにappendTo()を使用してください。 http://api.jquery.com/appendto/

.append（）と.appendTo（）メソッドは同じタスクを実行します。主な違いは、具体的にはコンテンツとターゲットの配置における構文です。 .append（）を使用すると、メソッドに先行するセレクタ式が、コンテンツが挿入されるコンテナになります。一方、.appendTo（）を使用すると、コンテンツはセレクタ式として、またはその場で作成されたマークアップとしてメソッドの前に置かれ、ターゲットコンテナに挿入されます。ここで

は、マークアップだ：

var div = $('#ui-container'); 
var div2 = $('<div>div2<div/>').addClass('second').appendTo(div); 
var div3 = $('<div>div3<div/>').addClass('third').appendTo(div2); 

Answer 5

あなたのすべての変数div、div2とdiv3同じ要素$('#ui-container')を参照してください。 Fiddleにも

/* What you did is this: */ 
 
var container = $('.result1'); 
 
var containerWithSecondAppended = container.append($('<div/>').addClass('second')); 
 
var containerWithThirdAppended = containerWithSecondAppended.append($('<div/>').addClass('third')); 
 

 
/* What you wanted to do is this: */ 
 
var div = $('.result2'); 
 
var div2 = $('<div/>').addClass('second'); 
 
var div3 = $('<div/>').addClass('third'); 
 
div.append(div2.append(div3));

div { 
 
\t padding: 10px; 
 
\t border: 1px solid black; 
 
} 
 
.result { 
 
\t margin: 10px; 
 
\t padding: 10px; 
 
} 
 
.second { 
 
\t background: none yellow; 
 
} 
 
.third { 
 
\t background: none green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="result result1"></div> 
 
<div class="result result2"></div>

を：あなたは何が起こるかを見ることができるようにあなたが何をしたかを理解するための最も簡単な方法は、あなたの変数の名前を変更することです。

jQuery append methodは、追加された（変更された）jQuery要素を返します。