js解析json，并动态创建dom元素，放到指定元素下，求高手指点！

求高手急救！！！！
json数据如下：
var chat=[
 {
 'aa': '110000000',
 'chatLog': [
{'name1': 'abc','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'},
{'name1': 'efg','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'},
{'name1': 'abc','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'}
 ]
},
{
'aa': '11',
'chatLog': [
{'name1': 'abc','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'},
{'name1': 'abc','hour': '1111111111','content': '你好！'},
{'name1': 'efg','hour': '2222222222','content': '不好！'}
]
}
]js部分为：
<script type="text/javascript">
$().ready(function() {
 for(var i=0;i<chat.length;i++)
 {
 var div= document.createElement('div');
 div.innerHTML=''+chat[i].aa+'<hr/><dl></dl>'
 div.className='chat_win';
 $(".panal").append(div);
 for(var j=0;j<chat[i].chatLog.length;j++)
{
var dt=document.createElement('dt');
$(".panal dl").append(dt);
}没有达到我要的效果？？？求修改！

}
});
</script>
<body>
<div class="panal"></div>
</body>想实现成以下效果：
<div class="panal">
<div class="chat_win">
110000000
<hr/>
<dl>
<dt class="chat_A">abc1111111111</dt>
<dd>你好！</dd>
<dt class="chat_B">efg2222222222</dt>
<dd>不好！</dd>
<dt class="chat_B">efg1111111111</dt>
<dd>你好！</dd>
<dt class="chat_B">efg2222222222</dt>
<dd>不好！</dd>
<dt class="chat_A">abc1111111111</dt>
<dd>你好！</dd>
<dt class="chat_B">efg2222222222</dt>
<dd>不好！</dd> </dl>
</div>
<div class="chat_win">
11
<hr/>
<dl>
<dt class="chat_A">abc1111111111</dt>
<dd>你好！</dd>
<dt class="chat_B">efg2222222222</dt>
<dd>不好！</dd>
<dt class="chat_A">abc1111111111</dt>
<dd>你好！</dd>
<dt class="chat_B">efg2222222222</dt>
<dd>不好！</dd> </dl>
</div>
</div>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

$(document).ready(function() {for(var i=0;i<chat.length;i++)
{
var div= document.createElement('div');
div.innerHTML=''+chat[i].aa+'<hr/><dl></dl>'
div.className='chat_win';
$(".panal").append(div);
for(var j=0;j<chat[i].chatLog.length;j++)
{
var dt=document.createElement('dt');
dt.innerHTML=chat[i].chatLog[j].content
$(".panal dl").append(dt);
dt=document.createElement('dt');
dt.innerHTML=""+chat[i].chatLog[j].name1+""+chat[i].chatLog[j].hour+""
$(".panal dl").append(dt);
}

}
});
$().ready(function () {
 var div, dl, clsKV, chr = 65;
 for (var i = 0; i < chat.length; i++) {
 div = document.createElement('div');
 div.innerHTML = '' + chat[i].aa + '<hr/><dl></dl>'
 div.className = 'chat_win';
 $(".panal").append(div);
 dl = $(div).find('dl');
 clsKV = {};
 chr = 65;
 for (var j = 0; j < chat[i].chatLog.length; j++) {//////////////
 if (!clsKV[chat[i].chatLog[j].name1]) {//样式控制
 clsKV[chat[i].chatLog[j].name1] = new String.fromCharCode(chr);
 chr++;
 }
 dl.append('<dt class="chat_' + clsKV[chat[i].chatLog[j].name1] + '">' + chat[i].chatLog[j].name1 + '' + chat[i].chatLog[j].hour + '</dt><dd>' + chat[i].chatLog[j].content + '</dd>');
 } }
});
这样不行，我之前就是这么做的，但是dt/dd会变多，本来是6条和4条数据，会变成10条和4条数据。你再帮忙看看
搞错，多了个new，代码出处了
$().ready(function () {
 var div, dl, clsKV, chr = 65;
 for (var i = 0; i < chat.length; i++) {
 div = document.createElement('div');
 div.innerHTML = '' + chat[i].aa + '<hr/><dl></dl>'
 div.className = 'chat_win';
 $(".panal").append(div);
 dl = $(div).find('dl');
 clsKV = {};
 chr = 65;
 for (var j = 0; j < chat[i].chatLog.length; j++) {//////////////
 if (!clsKV[chat[i].chatLog[j].name1]) {//样式控制
 ///clsKV[chat[i].chatLog[j].name1] = new String.fromCharCode(chr); clsKV[chat[i].chatLog[j].name1] = String.fromCharCode(chr);
 chr++;
 }
 dl.append('<dt class="chat_' + clsKV[chat[i].chatLog[j].name1] + '">' + chat[i].chatLog[j].name1 + '' + chat[i].chatLog[j].hour + '</dt><dd>' + chat[i].chatLog[j].content + '</dd>');
 } }
});
dt=document.createElement('dt');
dt.innerHTML=""+chat[i].chatLog[j].name1+""+chat[i].chatLog[j].hour+""
$(".panal dl").append(dt);
$(".panal dl").append(dt);你这个选择器有问题啊，会将所有的dt给dl重新加一次。其他代码你应该都清楚，就接卸关键的
 dl = $(div).find('dl');//这里获取刚添加到dom的dl对象，以后使用此对象操作，而不是$(".panal dl")，这样会操作所有已经添加到dom的dl对象
 clsKV = {};//重置样式键值对象
 chr = 65;//A字符对应的数字编码
 for (var j = 0; j < chat[i].chatLog.length; j++) {//////////////
 if (!clsKV[chat[i].chatLog[j].name1]) {//样式控制，判断是否存在对应名字的kv对了，没有则添加
 clsKV[chat[i].chatLog[j].name1] = String.fromCharCode(chr);//从数字生成字符
 chr++;//换到下一个字符，变换样式
 }
////////////往前面获取到的dl增加内容
 dl.append('<dt class="chat_' + clsKV[chat[i].chatLog[j].name1] + '">' + chat[i].chatLog[j].name1 + '' + chat[i].chatLog[j].hour + '</dt><dd>' + chat[i].chatLog[j].content + '</dd>');
 }