เมื่อเร็ว ๆ นี้พบว่าห้องสมุดที่สำคัญทั้งหมดสามารถใช้ xxx.innerhtml = ชิ้นส่วน HTML เพื่อสร้างองค์ประกอบโหนดแล้วแทรกลงในตำแหน่งต่าง ๆ ขององค์ประกอบเป้าหมาย สิ่งนี้เป็นสิ่งที่แทรกได้จริง แต่ IE innerhtml ที่น่ารังเกียจของฉันเปลี่ยนข้อได้เปรียบนี้ให้กลายเป็นข้อเสีย
ไม่สามารถกำหนด innerhtml ของ tbody ใน IE6/IE7/IE8/IE9 ได้รหัสที่ทำซ้ำมีดังนี้
การคัดลอกรหัสมีดังนี้:<! doctype html>
<html>
<head>
<meta charset = utf-8/>
<title> ie6-ie9 innerhtml ไม่สามารถคัดลอกบั๊ก </title>
</head>
<body style = ความสูง: 3000px>
<table>
<tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</table>
<p>
<ปุ่ม id = btn1> รับ </button> <ปุ่ม id = btn2> ตั้งค่า </putions>
</p>
<script>
var tbody = document.getElementsByTagname ('tbody') [0]
ฟังก์ชั่น settbody () {
tbody.innerhtml = '<tr> <td> bbb </td> </tr>'
-
ฟังก์ชั่น gettbody () {
การแจ้งเตือน (tbody.innerhtml)
-
btn1.onclick = function () {
Gettbody ()
-
btn2.onclick = function () {
Settbody ()
-
</script>
</body>
</html>
สองปุ่มปุ่มแรกได้รับ innerhtml ของ tbody และปุ่มที่สองตั้งค่า innerhtml ของ tbody
เมื่อได้รับมันเบราว์เซอร์ทั้งหมดจะปรากฏขึ้นเป็นสตริงของ TR แต่เมื่อตั้งค่า IE6-9 ไม่รองรับและมีการรายงานข้อผิดพลาดดังแสดงในรูปที่แสดงในรูปที่
คุณสามารถใช้คุณสมบัติเพื่อตรวจสอบว่าเบราว์เซอร์รองรับการตั้งค่า innerhtml ของ tbody
การคัดลอกรหัสมีดังนี้:var isupporttbodyinnerhtml = function () {
var table = document.createElement ('ตาราง')
var tbody = document.createElement ('tbody')
table.appendchild (tbody)
var boo = true
พยายาม{
tbody.innerhtml = '<tr> </tr>'
} catch (e) {
boo = false
-
กลับ Boo
-
การแจ้งเตือน (isupporttbodyinnerhtml)
สำหรับ IE6-IE9 หากคุณต้องการตั้งค่า innerhtml ของ tbody คุณสามารถใช้วิธีทางเลือกต่อไปนี้
การคัดลอกรหัสมีดังนี้:ฟังก์ชั่น settbodyinnerhtml (tbody, html) {
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</table>'
ในขณะที่ (tbody.firstchild) {
tbody.removechild (tbody.firstchild)
-
tbody.appendchild (div.firstchild.firstchild)
-
ใช้ div เพื่อบรรจุตารางจากนั้นลบองค์ประกอบทั้งหมดใน tbody และในที่สุดก็เพิ่มองค์ประกอบแรกขององค์ประกอบแรกของ div ลงใน tbody นั่นคือ div> table> tr
แน่นอนว่ามีเวอร์ชันที่มีความคล่องตัวมากขึ้นซึ่งใช้วิธีการแทนที่โดยตรงเพื่อแทนที่
การคัดลอกรหัสมีดังนี้:ฟังก์ชั่น settbodyinnerhtml (tbody, html) {
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</table>'
tbody.parentnode.replacechild (div.firstchild.firstchild, tbody)
-
จากบันทึก MSDN, innerhtml ของ col, colgroup, frameset, html, head, style, table, tfoot, thead, tite, title และ tr ล้วนอ่านอย่างเดียว (IE6-IE9)
คุณสมบัติ InnerHTML นั้นอ่านได้อย่างเดียวบน Col, Colgroup, Frameset, HTML, Head, Style, Table, Tbody, Tfoot, Thead, Title, Title และ TR
คุณสามารถเปลี่ยนค่าขององค์ประกอบชื่อโดยใช้คุณสมบัติ Document.title
ในการเปลี่ยนเนื้อหาของตาราง tfoot, thead และ tr องค์ประกอบให้ใช้โมเดลวัตถุตารางที่อธิบายไว้ในตารางการสร้างแบบไดนามิก อย่างไรก็ตามในการเปลี่ยนเนื้อหาของเซลล์ใดเซลล์หนึ่งคุณสามารถใช้ InnerHTML