最近、すべての主要ライブラリがxxx.innerhtml = htmlフラグメントを使用してノード要素を生成し、ターゲット要素のさまざまな場所に挿入できることがわかっています。このことは実際にはIntersadjacenthtmlですが、IEはこの利点を不利に変えます。
IE6/IE7/IE8/IE9のTBODYのinnentmlは割り当てられません。再現されたコードは次のとおりです。
コードコピーは次のとおりです。<!doctype html>
<html>
<head>
<メタcharset = utf-8/>
<Title> IE6-IE9 innerhtmlはバグをコピーできません</title>
</head>
<ボディスタイル=高さ:3000px>
<表>
<tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</table>
<p>
<ボタンID = btn1> get </button> <button id = btn2> set </button>
</p>
<スクリプト>
var tbody = document.getElementsBytagname( 'tbody')[0]
functionsetbody(){
tbody.innerhtml = '<tr> <td> bbb </td> </tr>'
}
function gettbody(){
アラート(tbody.innerhtml)
}
btn1.onclick = function(){
gettbody()
}
btn2.onclick = function(){
setbody()
}
</script>
</body>
</html>
2つのボタン、最初のボタンはTbodyの内側のhtmlを取得し、2番目のボタンはTbodyの内側htmlを設定します。
それを取得するとき、すべてのブラウザがTRの文字列をポップアップしますが、設定するとき、IE6-9はそれをサポートせず、図に示すようにエラーが報告されます
特性を使用して、ブラウザがTbodyのinnerhtml設定をサポートするかどうかを判断できます
コードコピーは次のとおりです。var isupporttbodyinnerhtml = function(){
var table = document.createelement( 'table')
var tbody = document.createelement( 'tbody')
Table.AppendChild(Tbody)
var boo = true
試す{
tbody.innerhtml = '<tr> </tr>'
} catch(e){
boo = false
}
ブーイングを返します
}()
アラート(isupporttbodyinnerhtml)
IE6-IE9の場合、Tbodyのinnerhtmlを設定する場合は、次の代替方法を使用できます。
コードコピーは次のとおりです。関数setbodyinnerhtml(tbody、html){
var div = document.createelement( 'div')
div.innerhtml = '<table>' + html + '</table>'
while(tbody.firstchild){
tbody.removechild(tbody.firstchild)
}
tbody.appendchild(div.firstchild.firstchild)
}
Divを使用してテーブルを含め、Todyのすべての要素を削除し、最後にDivの最初の要素の最初の要素をTbodyに追加します。つまり、Div> Table> tr。
もちろん、より合理化されたバージョンがあります。これは、交換方法を直接使用して交換する
コードコピーは次のとおりです。関数setbodyinnerhtml(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の内側のhtmlはすべて読み取り専用です(ie6-ie9)。
InternHTMLプロパティは、col、colgroup、frameset、html、head、style、table、tbody、tfoot、thead、title、およびtrオブジェクトで読み取り専用です。
document.titleプロパティを使用して、タイトル要素の値を変更できます。
テーブル、Tfoot、Thead、およびTR要素の内容を変更するには、テーブルの構築で説明されているテーブルオブジェクトモデルを動的に使用します。ただし、特定のセルの含有量を変更するには、innerhtmlを使用できます。