jquery（TypeScript）を使用してdivコンテナにdiv要素を作成したい

Question

10個のDiv要素を含む10個のDivコンテナを作成したいと考えています。 そのため私はjqueryのを使用して活字体で次のコードを書かれている：

for (var i = 0; i < 10; i++) { 
     var outsidediv = $('<div id="outsidediv"></div>').appendTo('body') 
     for (var j = 0; j < 10; j++) { 
     } 
     var innerdiv = $('<div class="innerdiv"></div>').appendTo('outsidediv'); 
    } 
}) 

をしかし、それはないすべては、それが10個の事業部コンテナとコンテナの内部ではなく、1事業部の要素を、作成することです。 誰かがこの（通常は）簡単な問題をすばやく見ることができたら本当に感謝します。

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

Answer 1

for (var i = 0; i < 10; i++) { 
 
    var outsidediv = $('<div id="outsidediv' + i +'" class="outsidediv" />').appendTo('body'); 
 
    
 
    for (var j = 0; j < 10; j++) { 
 
     var innerdiv = $('<div class="innerdiv"/>').appendTo('.outsidediv:last-child'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

すでにコンテナ#outsidedivの中に.innerdivを追加すると、HTMLの単一の文字列を作成し、その文字列を本文に追加します。

for (var i = 0; i < 10; i++) { 
     var div = '<div id="outsidediv">' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '<div class="innerdiv"></div>' + 
        '</div>'; 
     $('body').append(div); 
    } 
}) 

Answer 3

私は何が起こっているのをよく見てとりませんでしたが、何をすぐに私に飛び出しすることは、閉じたところを下回っているループのためのあなたの第二は、あなたの「innerdiv」変数として何もしていないされています。

for (var i = 0; i < 10; i++) { 
    $('<div id="outsidediv"></div>').appendTo('body'); 
    for (var j = 0; j < 10; j++) { 
     $('<div class="innerdiv"</div>').appendTo('outsidediv'); 
    } 
    } 

jqueryは「outsidediv」を追加することができないため、これを修正することはできません。あなたは別のアプローチを考える必要があります。たぶんあなたが望むhtmlを出力しますか？

var html = ''; 
for (var i = 0; i < 10; i++) { 
    html += '<div id="outsidediv">'; 
    for (var j = 0; j < 10; j++) { 
    html += '<div class="innerdiv"</div>'; 
    } 
    html += '</div>'; 
} 
$(html).appendTo('body'); 

これは最短の方法ではありませんが、必要な処理を行う必要があります。