Search code examples
jqueryhtmlinternet-explorer-9append

.append <table> JQuery not working in IE

My table is printing fine in Firefox, but is not displaying in IE9.

Any help would be greatly appreciated.

Thank you.

Please see code below:

$("p").append("<br>");
$("p").append("This is printing in IE"); //table is not

$("p").append("<table id=\"course_titles\" class=\"display\" bgcolor = \"#CC0000\" width=\"75%\" cellspacing=\"0\" border = \"1\">");
$("#course_titles").append("<tr>");
$("#course_titles").append("<td><b>Course Title</b></td>");
$("#course_titles").append("<td><b>CU Equivalent</b></td>");   //None of this table is printing in IE, works in Firefox
$("#course_titles").append("<td><b>Subject</b></td>");
$("#course_titles").append("<td><b>ECTS</b></td>");
$("#course_titles").append("<td><b>Credit Value</b></td>");
$("#course_titles").append("<td><b>Course Number</b></td>");
$("#course_titles").append("</tr>");
$("#course_titles").append("</table>");

$("p").append("<br>");
$("p").append("This is printing fine in IE");
Solution

  • Since it is working fine on my IE9, I would suggest appending the whole HTML with one `.append()' method instead of trying to append the table and try to use selector with its id. It sounds like your IE9 is having troubles finding the appended element most likely appended DOM element not being ready to use:

    $("p").append('<table id="course_titles" class="display" bgcolor = "#CC0000" width="75%" cellspacing="0" border = "1">'
    +'<tr>'
    +'<td><b>Course Title</b></td>'
    +'<td><b>CU Equivalent</b></td>'
    +'<td><b>Subject</b></td>'
    +'<td><b>ECTS</b></td>'
    +'<td><b>Credit Value</b></td>'
    +'<td><b>Course Number</b></td>'
    +'</tr>'
    +'</table>');

    http://jsfiddle.net/rb1ydsk0/2/