Baru -baru ini, telah ditemukan bahwa semua perpustakaan utama dapat menggunakan xxx.innerhtml = fragmen html untuk menghasilkan elemen simpul, dan kemudian memasukkannya ke berbagai lokasi elemen target. Benda ini sebenarnya adalah insertAdJacentHtml, tetapi IE yang keji dalam HTNHTML mengubah keunggulan ini menjadi kerugian.
Innerhtml dari tbody di IE6/IE7/IE8/IE9 tidak dapat ditetapkan, kode yang direproduksi adalah sebagai berikut
Salinan kode adalah sebagai berikut:<! Doctype html>
<Html>
<head>
<Meta Charset = UTF-8/>
<title> ie6-Ie9 innerHtml tidak dapat menyalin bug </iteme>
</head>
<Gaya Tubuh = Tinggi: 3000px>
<able>
<tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</boable>
<p>
<tombol id = btn1> dapatkan </atton> <tombol id = btn2> Set </button>
</p>
<script>
var tbody = document.geteLementsbyTagname ('tbody') [0]
fungsi settbody () {
tbody.innerHtml = '<tr> <td> bbb </td> </tr>'
}
function getTbody () {
Peringatan (tody.innerhtml)
}
btn1.onClick = function () {
gettbody ()
}
btn2.onClick = function () {
settbody ()
}
</script>
</body>
</html>
Dua tombol, yang pertama mendapatkan bagian dalam tbody, dan yang kedua menetapkan bagian dalam tbody.
Saat mendapatkannya, semua browser memunculkan serangkaian TR, tetapi saat mengaturnya, IE6-9 tidak mendukungnya, dan kesalahan dilaporkan, seperti yang ditunjukkan pada gambar
Anda dapat menggunakan karakteristik untuk menentukan apakah browser mendukung pengaturan tbody dalam
Salinan kode adalah sebagai berikut:var isupportTbodyInnerHtml = function () {
var table = document.createElement ('tabel')
var tbody = document.createElement ('tbody')
Table.AppendChild (TBody)
var boo = true
mencoba{
tbody.innerHtml = '<tr> </tr>'
} catch (e) {
boo = false
}
Kembalikan Boo
} ()
waspada (isupporttbodynerhtml)
Untuk IE6-IE9, jika Anda ingin mengatur bagian dalam tbody, Anda dapat menggunakan metode alternatif berikut
Salinan kode adalah sebagai berikut:fungsi settebodynerhtml (tbody, html) {
var div = document.createelement ('div')
Div.innerHtml = '<able>' + html + '</ablect>'
while (tbody.firstchild) {
tbody.removechild (tbody.firstchild)
}
tbody.appendchild (div.firstchild.firstchild)
}
Gunakan div untuk berisi tabel, lalu hapus semua elemen di tbody, dan akhirnya tambahkan elemen pertama dari elemen pertama div ke tbody, yaitu, div> tabel> tr.
Tentu saja ada versi yang lebih ramping, yang secara langsung menggunakan metode Replacechild untuk menggantikan
Salinan kode adalah sebagai berikut:fungsi settebodynerhtml (tbody, html) {
var div = document.createelement ('div')
Div.innerHtml = '<able>' + html + '</ablect>'
tbody.parentnode.replacechild (div.firstchild.firstchild, tbody)
}
Dari catatan MSDN, bagian dalam col, colgroup, frameset, html, kepala, gaya, meja, tfoot, thead, judul dan tr semuanya read-only (IE6-IE9).
Properti InnerHTML hanya baca di col, colgroup, frameset, html, kepala, gaya, meja, tbody, tfoot, thead, judul, dan objek TR.
Anda dapat mengubah nilai elemen judul menggunakan properti Document.Title.
Untuk mengubah konten elemen tabel, tfoot, thead, dan tr, gunakan model objek tabel yang dijelaskan dalam tabel bangunan secara dinamis. Namun, untuk mengubah konten sel tertentu, Anda dapat menggunakan innerHTML.