Recently, it has been found that all major libraries can use xxx.innerHTML=HTML fragments to generate node elements, and then insert them into various locations of the target element. This thing is actually insertAdjacentHTML, but IE's abominable innerHTML turns this advantage into a disadvantage.
The innerHTML of tbody in IE6/IE7/IE8/IE9 cannot be assigned, the reproduced code is as follows
The code copy is as follows:<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>IE6-IE9 innerHTML cannot copy bug</title>
</head>
<body style=height:3000px>
<table>
<tbody>
<tr><td>aaa</td></tr>
</tbody>
</table>
<p>
<button id=btn1>GET</button><button id=btn2>SET</button>
</p>
<script>
var tbody = document.getElementsByTagName('tbody')[0]
function setTbody() {
tbody.innerHTML = '<tr><td>bbb</td></tr>'
}
function getTbody() {
alert(tbody.innerHTML)
}
btn1.onclick = function() {
getTbody()
}
btn2.onclick = function() {
setTbody()
}
</script>
</body>
</html>
Two buttons, the first one gets the innerHTML of the tbody, and the second one sets the innerHTML of the tbody.
When getting it, all browsers pop up a string of tr, but when setting it, IE6-9 does not support it, and an error is reported, as shown in the figure
You can use the characteristics to determine whether the browser supports the innerHTML setting of tbody
The code copy 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 = '<tr></tr>'
} catch(e) {
boo = false
}
return boo
}()
alert(isupportTbodyInnerHTML)
For IE6-IE9, if you want to set the innerHTML of tbody, you can use the following alternative method
The code copy is as follows: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 contain a table, then delete all elements in the tbody, and finally add the first element of the first element of the div to the tbody, that is, div>table>tr.
Of course there is a more streamlined version, which directly uses the replaceChild method to replace
The code copy is as follows:function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}
From the MSDN record, the innerHTML of col, colGroup, frameset, html, head, style, table, tfoot, tHead, title and tr are all 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 particular cell, you can use innerHTML.