動的に挿入された要素に動的に要素を挿入する方法はありますか？

Question

動的に追加された要素に動的に追加できるようにしたい。あなたが持っている場合は この：

<div id="main"> 

</div> 

$(document).ready(function() { 
    $('#main').append('<div id="inner"></div>'); 

    $('#inner').append('<div id="goal"></div>'); 
}); 

#goalが追加されることは決してありません。これを処理するためのjquery関数はありますか、それをどうすればできますか？その頭の上に

http://jsfiddle.net/jmZY4/

Answer 1

電源を入れ、それは（live copy   — が、ところで、2つの#mainルールあなたの例のCSSのバグではなかったし、何#innerルール）：

$(document).ready(function() { 
    var inner = $('<div id="inner"></div>'); 
    inner.appendTo('#main'); 
    inner.append('<div id="goal"></div>'); 
}); 

appendToはappendのようなものです。

（私の見解では）それは明確さの損失（live copy）価値はないけれどもあなたは、よりコンパクトことを書くことができます：もちろん

$(document).ready(function() { 
    $('<div id="inner"></div>') 
     .appendTo('#main') 
     .append('<div id="goal"></div>'); 
}); 

を、あなたの正確例では、あなたは可能性だけで（live copy ）：

$(document).ready(function() { 
    $('#main').append('<div id="inner"><div id="goal"></div></div>'); 
}); 

...しかし、あなたは2つの別々に行う理由があると思います。

Answer 2

は、私は1つの要素を挿入するプラグインを持っている、そして私は、コールバックを介して第1の1の要素を挿入したいので、私はそれらを一緒に行うことはできません。この

$(document).ready(function() { 
    $('<div id="inner"></div>').append('<div id="goal"></div>').appendTo('#main'); 
});