The solution to the innerHTML of tbody in IE6-IE9

The tbody innerHTML in IE6-IE9 cannot be assigned a value and the following code is reproduced

JS Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

Two buttons, the first to get the Tbody innerHTML, and the second to set the Tbody innerHTML.

When obtained, all browsers pop up the TR string, but the ie6-9 is not supported when set and the error is shown

You can use the feature to determine whether the browser supports TBODY innerHTML setting values

1 2 3 4 5 6 7 8 9 10 11 12-13

var isupporttbodyinnerhtml = function () {var table = document.createelement (' table ') var tbody = document.createelement ( ' Tbody ') table.appendchild (tbody) var boo = true try{tbody.innerhtml = ' <tr></tr> '} catch (e) {boo = false} Return Boo} () alert (isupporttbodyinnerhtml)

Click to see if you are browsing this blog at this time browser support

Click Me

1

<script type= "Text/javascript" >//<! [cdata[var isupporttbodyinnerhtml = function () {var table = document.createelement (' table ') var tbody = Document.create Element (' tbody ') var tr = document.createelement (' tr ') var td = Document.createelement (' td ') var txt = Document.createtext Node (' a ') td.appendchild (TXT) tr.appendchild (TD) Tbody.appendchild (TR) table.appendchild (tbody) var boo = True try{ tbody.innerhtml = ' <tr><td>b</td></tr> '} catch (e) {boo = false} Return boo} (); Tbodyinnerhtml.onclick = function () {if (isupporttbodyinnerhtml) {alert (' Your browser supports tbody innerhtml assignment ')} else {alert (' Your bangs The navigator is the ie6-9 kernel and does not support tbody innerHTML assignment ')}//]]></script>

For IE6-IE9, if you want to set tbody innerHTML, you can use the following workaround

JS Code

1 2 3 4 5 6 7 8

function settbodyinnerhtml (tbody, html) {var div = document.createelement (' div ') div.innerhtml = ' <table> ' + HTML + ' </table> ' while (tbody.firstchild) {tbody.removechild (Tbody.firstchild)} tbody.appendchild (Div.firstchild. FirstChild)}

Use a div to include a table, then delete all the elements in the tbody, and finally give Tbody the first element of the first element of the Div, that is, div>table>tr.

There is, of course, a more streamlined version, which uses the ReplaceChild method directly to replace

JS Code

1 2 3 4 5

> Fu Nction settbodyinnerhtml (tbody, HTML) {  var div = document.createelement (' div ')   div.innerhtml = ' <table& gt; ' + HTML + ' </table> '   tbody.parentNode.replaceChild (Div.firstChild.firstChild, tbody)  }