JQuery ajax dynamic Append CREATE table incompatible IE8

Very many cases. With JS (jQuery1.10) Dynamic to create some styles, the dynamic interaction of the page is very convenient

However, different browsers are not very compatible with dynamically generated, incompatible IE8 that are encountered here. Share with you

Code:

JSON data

Data.json

[{"Name": "Ajax", "Job": "Manong"},{"name": "JS", "Job": "Diaosi"}]

HTML page

<table class= "Ajaxappend" >

<thead></thead>

<tbody></tbody>

</table>

JS file

$document. Ready (function () {

. Ajax (Function () {

Type: "Post",

URL: "Data.json",

Success:function (data) {

$ (" . Ajaxappend tbody"). Append ("<t r >" );

$ (". Ajaxappend thead"). Append ("<th>name</th>");

$ (". Ajaxappend thead"). Append ("<th> job </th>");

$ (". Ajaxappend tbody"). Append ("</tr>");

for (int i = 0,l = Data.length; i < l; i = i+1) {

$ (". Ajaxappend tbody"). Append ("<t r >");

for (var key in Data[i]) {

$ (". Ajaxappend tbody"). Append ("<td>" +data[i][key]+ "</td>");

}

$ ( ". Ajaxappend tbody"). Append ("</t r >" );

}

}

});

});

The above effect in Firefox is able to dynamically generate a table

But in IE8 but not, after several verification. Guess, ie to the content of the dynamic append requirements, you need to have a full meaning of HTML together append into the code

Changes such as the following

$document. Ready (function () {

. Ajax (Function () {

Type: "Post",

URL: "Data.json",

Success:function (data) {

var head= "";

var body = "";

Head = head + "<tr><th>name</th><th>job</th></tr>";

for (int i = 0,l = Data.length; i < l; i = i+1) {

Body = body + "<tr>";

for (var key in Data[i]) {

Body = Body + "<td>" +data[i][key]+ "</td>";

}

Body = body + "</tr>";

}

· $ (". Ajaxappend tbody"). Append (body);

}

});

});

So that IE8 and Firefox will be able to display the normal

JQuery ajax dynamic Append CREATE table incompatible IE8