Vor kurzem wurde festgestellt, dass alle Hauptbibliotheken xxx.innerhtml = html -Fragmente verwenden können, um Knotenelemente zu erzeugen, und sie dann in verschiedene Stellen des Zielelements einfügen. Dieses Ding ist tatsächlich InsertAdjacenthtml, aber das abscheuliche Innerhtml von IE macht diesen Vorteil in einen Nachteil.
Die Innerhtml von Tbody in IE6/IE7/IE8/IE9 kann nicht zugewiesen werden, der reproduzierte Code lautet wie folgt
Die Codekopie lautet wie folgt:<! DocType html>
<html>
<kopf>
<meta charset = utf-8/>
<titels> IE6-IE9 InnerHtml kann den Fehler </title> nicht kopieren
</head>
<Body Style = Höhe: 3000px>
<tabelle>
<tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</table>
<p>
<button id = btn1> gett </button> <button id = btn2> set </button>
</p>
<Script>
var tbody = document.getElementsByTagName ('tbody') [0]
Funktionssetzbody () {
tbody.innerhtml = '<tr> <td> BBB </td> </tr>' '
}
Funktion Gettbody () {
Alarm (tbody.innerhtml)
}
btn1.onclick = function () {
Gettbody ()
}
btn2.onclick = function () {
settbody ()
}
</script>
</body>
</html>
Zwei Tasten, die erste, bekommt die innere Innerhtml des Tbody, und der zweite setzt die innere Häuse des TBODY.
Wenn Sie es erhalten, tauchen alle Browser eine Reihe von TR auf, aber beim Einstellen unterstützt IE6-9 sie nicht, und ein Fehler wird gemeldet, wie in der Abbildung gezeigt
Sie können die Eigenschaften verwenden, um festzustellen, ob der Browser die innere Einstellung von Tbody unterstützt
Die Codekopie lautet wie folgt:var isupporttbodyInnerhtml = function () {
var table = document.createelement ('Tabelle')
var tbody = document.createelement ('tbody')
Tabelle.AppendChild (tbody)
var boo = true
versuchen{
tbody.innerhtml = '<tr> </tr>'
} catch (e) {
boo = false
}
BOO zurückgeben
} ())
Alarm (isupportTBodyInnerhtml)
Für IE6-IE9 können Sie die folgende alternative Methode verwenden
Die Codekopie lautet wie folgt:Funktionsdodsinnerhtml (tbody, html) {
var div = document.createelement ('div')
div.innerhtml = '<table>' + html + '</table>' '
while (tbody.firstchild) {
tbody.removechild (tbody.Firstchild)
}
tbody.Appendchild (Div.Firstchild.Firstchild)
}
Verwenden Sie eine DIV, um eine Tabelle zu enthalten, dann alle Elemente im TBODY zu löschen und schließlich das erste Element des ersten Elements des DIV zum TBODY hinzu, dh div> table> tr.
Natürlich gibt es eine optimiertere Version, die die Ersatzmethode direkt verwendet
Die Codekopie lautet wie folgt:Funktionsdodsinnerhtml (tbody, html) {
var div = document.createelement ('div')
div.innerhtml = '<table>' + html + '</table>' '
tbody.parentnode.replacechild (div.firstchild.firstchild, tbody)
}
Aus der MSDN-Aufzeichnung sind die innere Innerhtml von Col, Colgroup, Frameset, HTML, Kopf, Stil, Tisch, Tfoot, Thead, Titel und TR alle schreibgeschützt (IE6-IE9).
Die Innerhtml-Eigenschaft ist nur schreibgeschützt in den Objekten Col, Colgroup, Frameset, HTML, Kopf, Stil, Tisch, Tbody, Tfoot, Thead, Titel und TR.
Sie können den Wert des Titelelements mit der Eigenschaft von Dokument.Title ändern.
Um den Inhalt der Tabelle, TFOOT, THE und TR -Elemente zu ändern, verwenden Sie das in den Tabellen beschriebene Tabellenobjektmodell dynamisch. Um den Inhalt einer bestimmten Zelle zu ändern, können Sie Innerhtml verwenden.