I've the following table in my application. I've a ajax request which will fetch the results to be shown in the table. How add these results to the table with out overridding the header every time?

<table id="itemList">
    <td>Name</td>
    <td>Price</td>
    <td>Quantity</td>
    <td>Total</td>
</table>

Then the ajax data is as shown below

var items = [
    { Name: "Apple", Price: "80", Quantity : "3", Total : "240" },
    { Name: "Orance", Price: "50", Quantity : "4", Total : "200" },
    { Name: "Banana", Price: "20", Quantity : "8", Total : "160" },
    { Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" }
];

Now I'm trying something like this but it is not working

var rows = "";
$.each(items, function(){
    rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
});

$( "#itemList" ).text('<tr><td>Name</td><td>Price</td><td>Quantity-</td><td>Total</td></tr>' + rows  );