IE6-IE9中tbody的innerHTML不能賦值的解決方法
更新時(shí)間：2014年06月05日 15:33:49 作者：
這篇文章主要介紹了IE6-IE9中tbody的innerHTML不能賦值的解決方法,需要的朋友可以參考下
IE6-IE9中tbody的innerHTML不能賦值，重現(xiàn)代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IE6-IE9中tbody的innerHTML不能復(fù)制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>
兩個(gè)按鈕，第一個(gè)獲取tbody的innerHTML，第二個(gè)設(shè)置tbody的innerHTML。
獲取時(shí)所有瀏覽器都彈出了tr的字符串，但設(shè)置時(shí)IE6-9不支持，而且報(bào)錯(cuò)，如圖
可以利用特性判斷來(lái)看瀏覽器是否支持tbody的innerHTML設(shè)值
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)
對(duì)于IE6-IE9里如果要設(shè)置tbody的innerHTML，可以使用如下替代方法
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)
}
用一個(gè)div來(lái)包含一個(gè)table，然后刪除tbody里的所有元素，最后給tbody添加div的第一個(gè)元素的第一個(gè)元素，即div>table>tr。
當(dāng)然還有一個(gè)更精簡(jiǎn)的版本，它直接采用replaceChild方法替換
function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}
從MSDN上記錄上看 col、colGroup、frameset、html、head、style、table、tfoot、tHead、title和tr的innerHTML都是只讀的（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.
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IE6-IE9中tbody的innerHTML不能復(fù)制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>
兩個(gè)按鈕，第一個(gè)獲取tbody的innerHTML，第二個(gè)設(shè)置tbody的innerHTML。
獲取時(shí)所有瀏覽器都彈出了tr的字符串，但設(shè)置時(shí)IE6-9不支持，而且報(bào)錯(cuò)，如圖
可以利用特性判斷來(lái)看瀏覽器是否支持tbody的innerHTML設(shè)值
復(fù)制代碼 代碼如下:
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)
對(duì)于IE6-IE9里如果要設(shè)置tbody的innerHTML，可以使用如下替代方法
復(fù)制代碼 代碼如下:
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)
}
用一個(gè)div來(lái)包含一個(gè)table，然后刪除tbody里的所有元素，最后給tbody添加div的第一個(gè)元素的第一個(gè)元素，即div>table>tr。
當(dāng)然還有一個(gè)更精簡(jiǎn)的版本，它直接采用replaceChild方法替換
復(fù)制代碼 代碼如下:
function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}
從MSDN上記錄上看 col、colGroup、frameset、html、head、style、table、tfoot、tHead、title和tr的innerHTML都是只讀的（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.
相關(guān)文章
JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁(yè)面
這篇文章主要介紹了JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁(yè)面,本文講解如何用JS實(shí)現(xiàn)HTTP重定向HTTPS或者HTTPS跳轉(zhuǎn)到HTTP,需要的朋友可以參考下2015-06-06
在Webpack中用url-loader處理圖片和字體的問(wèn)題
這篇文章主要介紹了在Webpack中用url-loader處理圖片和字體的問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
通過(guò)js簡(jiǎn)單實(shí)現(xiàn)將一個(gè)文本內(nèi)容轉(zhuǎn)譯成加密文本
將文本內(nèi)容轉(zhuǎn)譯成加密文本，在某些情況下還是比較實(shí)用的，下面通過(guò)js簡(jiǎn)單實(shí)現(xiàn)下，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目
這篇文章主要介紹了詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
js中g(shù)etter和setter用法實(shí)例分析
這篇文章主要介紹了js中g(shù)etter和setter用法,結(jié)合實(shí)例形式分析了javascript中g(shù)etter和setter的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)中棧的應(yīng)用之表達(dá)式求值問(wèn)題詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)中棧的應(yīng)用之表達(dá)式求值問(wèn)題,詳細(xì)分析了中綴表達(dá)式、后綴表達(dá)式等概念、原理與轉(zhuǎn)換方法,以及基于后綴表達(dá)式實(shí)現(xiàn)的表達(dá)式求值相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
Javascript動(dòng)畫(huà)插件lottie-web的使用方法
這篇文章主要介紹了Javascript動(dòng)畫(huà)插件lottie-web的使用方法，包括配合vue-cli使用及在HTML頁(yè)面中使用代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了postcss安裝和使用,通過(guò)這些深度集成,PostCSS不僅僅是一個(gè)簡(jiǎn)單的CSS處理工具,而是一種貫穿整個(gè)前端開(kāi)發(fā)流程的技術(shù)手段,大大提升了CSS開(kāi)發(fā)效率和產(chǎn)出質(zhì)量,隨著前端社區(qū)的發(fā)展,PostCSS的功能和應(yīng)用場(chǎng)景也會(huì)更加豐富多元,需要的朋友可以參考下2024-03-03
這篇文章主要通過(guò)js封裝cookie的函數(shù)代碼，想用js實(shí)現(xiàn)cookies操作的朋友可以參考下2013-06-06
js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09