JQuery performance issue (Or just bad CODING!)

function getItemDialogContent(planItemType) {
    var oDialogContent = $('<div/>').append($('#cardDialo开发者_如何学JAVAgHelper').html()).addClass("card");
    if (planItemType) {
        oDialogContent.find('#cardDialogHeader').addClass(planItemType).find('#dialogTitle').html(planItemType);
        oDialogContent.find('#cardDialogCustomFields').html($('#' + planItemType + 'DialogFields').html());

        if (planItemType == 'announcement' || planItemType == 'question') {
            oDialogContent.find("#dialogPin").remove();
        }
    }
    return oDialogContent;
}

I am doing some code cleanup for a web application I am working on. The above method lags in IE and most of our user base use IE. Can someone help me. I figure the find() method is very expensive because of the DOM traversal and I am thinking of optimizing. Any ideas anyone? Thanks in advance :D

Been doing some profiling on the application and the following line seems to be causing alot of problems. help me please. is there any way I can optimize ?

$('').append($('#cardDialogHelper').html()).addClass("card");

This is the ajax call that does the work. Is there a way to do some of this after the call. Please help me. (Added some functions I thought would be helpful in the diagnosis)

    GetAllPlansTemp = function() {
        $.getJSON("/SAMPLE/GetAllPlanItems",processData);
    }

    processData = function(data) {
        _throbber = showThrobber();
        var sortedPlanItems = $(data.d).sort("Sequence", "asc");
//        hideThrobber(_throbber);

        $(sortedPlanItems).each(createCardSkipTimelime);

        doCardStacks();
        doTimelineFormat();

        if (boolViewAblePlans == 'false') {
            $("p").show();
        }

        hideThrobber(_throbber);

    }

function createCardSkipTimelime() {

    boolViewAblePlans = 'false';

    if (this.__Deleted == 'true' || IsPastPlanItem(this)) {
        return;
    }

    boolViewAblePlans = 'true';
    fixer += "\n" + this.TempKey;  // fixes what looks like a js threading issue.

    var value = CreatePlanCard2(this, GetPlanCardStackContainer(this.__type));
    UpdatePlanCardNoTimeLine(value, this);


}

function CreatePlanCard2(carddata, sContainer) {
    var sCardclass = GetPlanCardClass(carddata.__type);
    var editdialog = getItemDialogContent(sCardclass);
    return $('<div/>').attr('id', carddata.TempKey).card({ 'container': $(sContainer), 'cardclass': sCardclass, 'editdialog': editdialog, 'readonly': GetCardMode(carddata) });
}

I doubt it is because of find, but rather because of html(). It causes the web browser to re-render HTML, and thus you encounter lags in IE.

As a means for optimization, you may use global selector rather than find for elements that are looked upon id:

$('#cardDialogHeader')

instead of

oDialogContent.find('#cardDialogHeader')

etc.

Another step I would do is try to use append or appendTo instead of html like this:

    $('#' + planItemType + 'DialogFields').appendTo('#cardDialogCustomFields');

UPDATE

function getItemDialogContent(planItemType) {
    var oDialogContent = $('#cardDialogHelper').clone().appendTo( $('<div/>').addClass("card") ).parent();
    if (planItemType) {
        oDialogContent.find('#cardDialogHelper').addClass(planItemType).find('#dialogTitle').html(planItemType);
        oDialogContent.find('#cardDialogCustomFields').append($('#' + planItemType + 'DialogFields').clone());

        if (planItemType == 'announcement' || planItemType == 'question') {
            oDialogContent.find("#dialogPin").remove();
        }
    }
    return oDialogContent;
}