Jqueryでdivとspanのスマートな追加方法

質問

Jqueryでdivとspanをスマートに追加したいです。

<dir id="alphabet"></dir>
htmlファイル内にこの↑div alphabetは記述していますが、
次の↓div agroupは記述していません。
<div class="agroup">
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

div alphabet内にdiv agroupをjqueryで挿入したいのですが、
スマートな書き方がわかりません。
多分eachなどを使うのでしょうが、
その具体的な書き方などをご教示願えますでしょうか。

なお、現在は以下のようなスマートでない書き方なら
一応当方の希望通りのことはできています。

$(function(){var a='"></span><span class="a';
$("#alphabet").prepend('<div class="agroup"><span class="a1'+a+'2'+a+'3'+a+'4'+a+'5'+a+'6'+a+'7'+a+'8'+a+'9'+a+'10"></span></div>');
});

素人が検索して得た知識のみで作成しました。
突込みどころ満載かと思いますので、
「ここはもっとこうした方がいいよ。」という箇所や
過去の似たような質問回答なども
お教えいただけると幸いです。

よろしくお願いします。

回答No.1

kosukejlampnet · ベストアンサー

では、できるだけjQueryの構文を使った形で回答しましょうか。

%(function (){
　　　　$("#alphabet").append("<div></div>").children("div").addClass("agroup");
　　　　for (var i=0;i<10;i++) {
　　　　　　　　$("div.agroup").append("<span></span>").children("span:last").addClass("a" + (i + 1));
　　　　}
});

お礼

すごいです！
お陰さまでやりたかったことができました。
質問してすぐにズバリの回答をいただけて
大変ありがたいです。

本当に助かりました。
ありがとうございました！