Content is not showing in IE8

Question

IE8 didn't showing content, in Chrome and Firefox everything is OK. There are no JS errors on page. I think there is something unsupportable in this part of code. Is there any ideas? I heard that .html() will not work in IE8 if there html tags inside are not valid.

var container = $('<table frame="below"style="margine-top:10px; padding-top:10px;"></table>',{

    'class' : 'ATC_table',
    'idx':section.INDEX
});


var inputs = '<input '+( (withRemove === false)  ? 'id="ORGUNIT_ID_Add"'  : "" )+' type="hidden" '+( (withRemove === true)  ? "disabled" : "" )+' style="float:right;" value="' + section.ORGUNIT_ID + '">'
    + '</input>'
    +'<input id="OrgUnit_Name" type="hidden">'
    + '</input>'
    +'<div class="sel_spec" style="display:inline-block; padding-top:12px"><input style="min-width:280px; max-width:280px; height:26px;"'+( (withRemove === false)  ? 'type="hidden" id="Orgunit_Name_1" ' : "" )+''+( (withRemove === true)  ?  'type="text"  value="' + section.ORGUNIT_NAME + '" disabled readonly ' :"")+'>'
    + '</input></div>'
    +'<div style="display:inline-block; padding-top:10px"><input type="text" size="17" style ="height: 26px; width: 110px; margin-left:30px; "  '+( (withRemove === false)  ? 'id="OrgUnit_Business_Code" readonly': "")+''+( (withRemove === true)  ? ' value="' + section.ORGUNIT_BUSINESSCODE + '" disabled  readonly ' : "" )+'>'
    + '</input></div>';
var select = '<div style="display:inline-block; margin-left:30px;">'
    + ( (withRemove === false) ? (PreCond_tohtmlSelect('PRECONDITION_NAME_Add')) : '<input type="text" '+( (withRemove === true)  ? "disabled" : "" )+'  style="width:300px; height:26px; " value="' + section.PRECONDITION_NAME + '">')
    + '</input></div>';

var table = $('<table style="padding-bottom:1px;border-collapse: separate;" class="ATC_table">\
    <thead>\
        <tr>\
        </tr>\
    </thead>\
    <tbody idx="' + section.INDEX + '">\
    </tbody>\
</table>');

container.html(inputs + select);

if(withRemove) {
var removeButton = 
    $('<button style ="margin-left:30px;"  class="ATC_Button_grey" idx="' + section.INDEX + '">Удалить</button>');

removeButton.click(deleteSection);
removeButton.appendTo(container);
} else {
    var addNewSectionButton = 
        $('<button style = "margin-left: 30px;"  class="ATC_Button_green" idx="' + section.INDEX + '">Добавить</button>');
    addNewSectionButton.click(saveNewSection);
    addNewSectionButton.appendTo(container);
}

table.appendTo(container);
container.appendTo(location);


for (var j in allAttributes) {
    var tbody = "";
    tbody +='<tr>';
    tbody +='<td width="178px"></td>';
    tbody +='<td width="210px align="right" style="text-align:right; ">'+allAttributes[j].NAME+'</td>';
    tbody +='<td style="padding-left:23px;">';
    if(section.INDEX == -1){tbody +='<input id="Att_add'+allAttributes[j].LIST_ITEM_ATT_ID+'" style="height: 26px;" type="text" attribute="';}
    else{tbody +='<input id="'+ section.INDEX +''+allAttributes[j].LIST_ITEM_ATT_ID  +'" style=" height: 26px;" type="text" attribute="';}
    tbody += allAttributes[j].LIST_ITEM_ATT_ID; 
    tbody += '" idx="' + section.INDEX;
    tbody += '" value="' + getSectionItemAttValue(section,allAttributes[j].LIST_ITEM_ATT_ID);
    tbody += '"/>';
    tbody +='</td>';
    tbody +='</tr>';
    table.children('tbody').append(tbody);
    appendChangeEvent(section,allAttributes[j].LIST_ITEM_ATT_ID);
    if(section.INDEX != -1) {forceSectionValue(section,allAttributes[j].LIST_ITEM_ATT_ID);}

}

Answer 1

try using:

container.empty().html(inputs + select);