JavaScript(jQuery)を使い、FAQの冒頭にある、よくある質問一覧を自動で作りたい

FAQのページを作成する場合などで、JavsScriptをどう活かすか考えてみましょう。

たとえば、トップの質問一覧とアンカーリンク、飛び先のid名を自動で生成し、
クリックするとその質問のアンカー位置に飛ばせるようにすれば、
更新も簡単。質問と解答を一回、追記するだけでよくなります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="qList"></ul>
<dl>
    	<dt>電卓とは何ですか</dt>
	<dd>電卓（でんたく、Calculator）は、計算の補助をするための道具のひとつ。
電子式卓上計算機（でんししきたくじょうけいさんき）の略であるが、1979年（昭和54年）にJIS B0117で
「電卓」が正式な名称となりました。（ウィキペディアより）</dd>
	<dt>DENTAKUとは何ですか</dt>
	<dd>電卓 (DENTAKU, 英/独：Pocket Calculator/Taschenrechner)はドイツの音楽グループ「クラフトワーク」の楽曲。 
日本語の歌詞が特徴。（ウィキペディアより）</dd>
</dl>

$(function(){
	//各質問のアンカーリンクのとび先となるidを付加
	$('dd').each(function(i){
		var len = i+1
		if(len < 10)
		len = "0"+len;
		var ref = "#QA"+len;
    	    $('dt').eq(i).prepend('質問'+len+':').attr({id:"QA"+len});
	    $('dd').eq(i).prepend('回答'+len+':');
		//Q(質問)のテキストを取得
		var qTxt = $('dt').eq(i).html();
		//liをappend
		$('ul#qList').append('<li>');
		//liの中身（aタグ+質問内容）を生成
		$('ul#qList li').eq(i).html('<a>'+qTxt+'</a>');
		//aタグのとび先を指定
		$('ul#qList li a').eq(i).attr({href:"#QA"+len});
		});
});

デモ
http://jsdo.it/dentaq/tXVb