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);
                });
});

Reply via email to