Append to newly created div - ajax

Question

I have a question to those jquery/ajax/javascript veterans, im creating a skill calculator for a certain game... everything is working fine up until this:
this is the ajax output:
{"skills":{"skill_id_1":"skill_name_1","skill_id_2":"skill_name_2"}}
this is my ajax:
function setOutput(){
if(httpObject.readyState == 4){
var results = eval('('+httpObject.responseText+')');
if (results['skills']){
$('#skilldiv').empty(); // empty div
$.each(results['skills'], function(key, value)
{
$("<div></div>").appendTo("#skilldiv").attr({class: "skilldesc"});
$("<div> </div>").appendTo(".skilldesc").attr({class: "skillinfo"});
$("<div> </div>").appendTo(".skilldesc").attr({class: "skilltxt"});
});
}
}
}
this is my div:
<div id="wrapper">
<ul>
<li id="skilldiv"></li>
</ul>
</div
so my problem is.. how can i append skillinfo & skilltxt to skilldesc which is just appended to skilldiv...
i tried this:
$.each(results['skills'], function(key, value)
{
$("<div></div>").appendTo("#skilldiv").attr({class: "skilldesc"});
$("<div> </div>").appendTo(".skilldesc").attr({class: "skillinfo"});
$("<div> </div>").appendTo(".skilldesc").attr({class: "skilltxt"});
});
but all results go into the first skilldesc,
im trying to get these:
<div id="wrapper">
<ul>
<li id="skilldiv">
<div class="skilldesc">
<div class="skillinfo">Some Info of skill 1 here</div>
<div class="skilltxt">Name of skill 1 here</div>
</div>
<div class="skilldesc">
<div class="skillinfo">Some Info of skill 2 here</div>
<div class="skilltxt">Name of skill 2 here</div>
</div>
</li>
</ul>
</div>
but i get this instead;
<div id="wrapper">
<ul>
<li id="skilldiv">
<div class="skilldesc">
<div class="skillinfo">Some Info of skill 1 here</div>
<div class="skilltxt">Name of skill 1 here</div>
<div class="skillinfo">Some Info of skill 2 here</div>
<div class="skilltxt">Name of skill 2 here</div>
</div>
<div class="skilldesc"></div>
</li>
</ul>
</div>
any help would be very much appreciated . . . thx

Answer 1

Because .skilldesc selects the first div too.
You can try this,
$.each(results['skills'], function(key, value)
{
$skilldesc = $("<div></div>").attr({class: "skilldesc"});
$("<div> </div>").appendTo($skilldesc).attr({class: "skillinfo"});
$("<div> </div>").appendTo($skilldesc).attr({class: "skilltxt"});
$skilldiv.appendTo("#skilldiv");
});
Also, you should to manipulations in objects in memory (not in dom).