Would appreciate some help on identifying the best way to utilize JQuery to build DOM objects in memory before inserting them into the document, here is some sample (abbreviated) code, which depicts what i am trying to do:
function Item(JSON) { this.JSON = JSON; this.Node = document.createDocumentFragment(); this.ContentContainer = document.createElement("div"); this.AddContent(); this.PackageNode(); } Item.prototype.AddContent = function() { $(this.ContentContainer).text(this.JSON.someText); return; } Item.prototype.PackageNode = function () { $(this.ContentContainer).attr("class", "title"); // How to optimize the next two blocks of code with JQuery? var table = document.createElement("table"); var tableRow = document.createElement("tr"); var tableColumn = document.createElement("td"); tableColumn.appendChild(this.ContentContainer); tableRow.appendChild(tableColumn); table.appendChild(tableRow); this.Node.appendChild(table); return; } function RenderItems(Items) { var item; $.each(Items, function(i, item) { item = new Item(item); $("#result").append(item.Node); }); }; $(document).ready(function() { $.getJSON("data.json", function(json){ RenderItems(json.items); }); });