Jquery insertAfter() doesn't seem to work for me...

Question

I have created a parent div and inserted div's after the parent div using jquery insertAfter() method.... What happens is My first record goes to the bottom and next record gets inserted above it....

Here is my function...

function Iteratejsondata(HfJsonValue) {
    var jsonObj = eval('(' + HfJsonValue + ')');
    for (var i = 0, len = jsonObj.Table.length; i < len; ++i) {
        var employee = jsonObj.Table[i];
        $('<div  class="resultsdiv"><br /><span id="EmployeeName" style="font-size:125%;font-weight:bolder;">' + employee.Emp_Name + '</span><span style="font-size:100%;font-weight:bolder;padding-left:100px;">Category&nbsp;:</span>&nbsp;<span>' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" style="font-size:100%;font-weight:bolder;">Salary Basis&nbsp;:</span>&nbsp;<span>' + employee.SalaryBasis + '</span><span style="font-size:100%;font-weight:bolder;padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span>' + employee.FixedSalary + '</span><span style="font-size:100%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span>' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');
    }
}

And my result is,

Palani must be next to my parent div but it is at the bottom... Because insertAfter() inserts every record next to the #ResultsDiv ... Any suggestion how to insertafter the newly generated div...

EDIT: how to add row color to these divs i used

 function Iteratejsondata(HfJsonValue) {
 var jsonObj = JSON.parse(HfJsonValue);
 for (var i = jsonObj.Table.length - 1; i >= 0; i--) {
    var employee = jsonObj.Table[i];
    $('<div id="resDiv" class="resultsdiv"><br /><span id="EmployeeName" style="font-size:125%;font-weight:bolder;">' + employee.Emp_Name + '</span><span style="font-size:100%;font-weight:bolder;padding-left:100px;">Category&nbsp;:</span>&nbsp;<span>' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" style="font-size:100%;font-weight:bolder;">Salary Basis&nbsp;:</span>&nbsp;<span>' + employee.SalaryBasis + '</span><span style="font-size:100%;font-weight:bolder;padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span>' + employee.FixedSalary + '</span><span style="font-size:100%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span>' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');
}
$("#resDiv.resultsdiv:odd").css("background-color", "#F4F4F8");
$("#resDiv.resultsdiv:even").css("background-color", "#EFF1F1");
}

But didnt work..

Answer 1

Reverse the loop:

for (var i = jsonObj.Table.length - 1; i >= 0; i--)

Remark: don't use eval. I would recommend you JSON.parse instead or if this JSON is coming from an ajax call jQuery should automatically parse it to object.

---

UPDATE:

To add row color to these divs you could try this outside the loop:

$(".resultsdiv:odd").css("background-color", "#F4F4F8");
$(".resultsdiv:even").css("background-color", "#EFF1F1");

Answer 2

You are adding elements after the parent element:

<div id="ResultsDiv">
</div>
<div class="resultsdiv">...4...</div>
<div class="resultsdiv">...3...</div>
<div class="resultsdiv">...2...</div>
<div class="resultsdiv">...1...</div>

but you probably want to add elements inside the parent element:

<div id="ResultsDiv">
  <div class="resultsdiv">...1...</div>
  <div class="resultsdiv">...2...</div>
  <div class="resultsdiv">...3...</div>
  <div class="resultsdiv">...4...</div>
</div>

Use the appendTo method instead of the insertAfter method.

Update:

You are adding several elements with the same id, which is not legal. Just use the class to target the elements:

$(".resultsdiv:odd").css("background-color", "#F4F4F8");
$(".resultsdiv:even").css("background-color", "#EFF1F1");