InnerHTML of tbody in IE6/IE7/IE8/IE9 cannot be assigned a perfect solution _ experience exchange

Recently, it was found that all major libraries can use xxx. innerHTMLHTML fragments to generate node elements, and then insert them into each position of the target element. This is actually insertAdjacentHTML, but the nasty innerHTML of IE turns this advantage into a disadvantage. InnerHTML of tbody in IE6/IE7/IE8/IE9 cannot be assigned a value.

The Code is as follows:

InnerHTML of tbody in IE6-IE9 cannot copy bug

Aaa

GETSET

Script
Var tbody = document. getElementsByTagName ('tbody') [0]
Function setTbody (){
Tbody. innerHTML ='Bbb'
}
Function getTbody (){
Alert (tbody. innerHTML)
}
Btn1.onclick = function (){
GetTbody ()
}
Btn2.onclick = function (){
SetTbody ()
}
Script

Two buttons: the first to get the innerHTML of the tbody and the second to set the innerHTML of the tbody.

When getting, all browsers pop up the tr string, but the IE6-9 is not supported at the time of the setting, and an error is reported,

You can use the feature to determine whether the browser supports tbody innerHTML settings.

The Code is as follows:

Var isupportTbodyInnerHTML = function (){
Var table = document. createElement ('table ')
Var tbody = document. createElement ('tbody ')
Table. appendChild (tbody)
Var boo = true
Try {
Tbody. innerHTML =''
} Catch (e ){
Boo = false
}
Return boo
}()
Alert (isupportTbodyInnerHTML)

If you want to set innerHTML for the tbody in the IE6-IE9, you can use the following alternative method:

The Code is as follows:

Function setTBodyInnerHTML (tbody, html ){
Var p = document. createElement ('P ')
P. innerHTML ='

'+ Html +' '
While (tbody. firstChild ){
Tbody. removeChild (tbody. firstChild)
}
Tbody. appendChild (p. firstChild. firstChild)
}

Use a p to contain a table, delete all the elements in the tbody, and add the first element of p to the tbody, that is, p> table> tr.

Of course, there is also a simpler version, which is directly replaced by the replaceChild method.

The Code is as follows:

Function setTBodyInnerHTML (tbody, html ){
Var p = document. createElement ('P ')
P. innerHTML ='

'+ Html +' '
Tbody. parentNode. replaceChild (p. firstChild. firstChild, tbody)
}

From the MSDN record, col, colGroup, frameset, html, head, style, table, tfoot, tHead, title, and tr are read-only (IE6-IE9 ).

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

You can change the value of the title element using the document. title property.

To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in Building Tables Dynamically. however, to change the content of a particle cell, you can use innerHTML.