Récemment, il a été constaté que toutes les grandes bibliothèques peuvent utiliser xxx.innerhtml = fragments HTML pour générer des éléments de nœud, puis les insérer dans divers emplacements de l'élément cible. Cette chose est en fait INSERTADJACENTHTML, mais IE est abominable innerhtml transforme cet avantage en un désavantage.
L'innerhtml de tbody dans ie6 / ie7 / ie8 / ie9 ne peut pas être attribué, le code reproduit est le suivant
La copie de code est la suivante:<! Doctype html>
<html>
<adal>
<Meta Charset = UTF-8 />
<Title> IE6-IE9 InnerHTML Impossible de copier Bug </Title>
</ head>
<style corporel = hauteur: 3000px>
<ballage>
<tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</ table>
<p>
<Button ID = BTN1> Get </futton> <Button ID = BTN2> SET </ Button>
</p>
<cript>
var tbody = document.getElementsByTagName ('tbody') [0]
function setch () {
tbody.innerhtml = '<tr> <td> bbb </td> </tr>'
}
function getTbody () {
alert (tbody.innerhtml)
}
btn1.onclick = function () {
getTbody ()
}
btn2.onclick = function () {
Settbody ()
}
</cript>
</docy>
</html>
Deux boutons, le premier obtient l'innerhtml du TBODY, et le second définit l'Innerhtml du TBODY.
Lorsque vous l'obtiez, tous les navigateurs apparaissent une chaîne de TR, mais lors de la définition, IE6-9 ne le prend pas en charge, et une erreur est signalée, comme indiqué sur la figure
Vous pouvez utiliser les caractéristiques pour déterminer si le navigateur prend en charge le paramètre InnerHTML de TBOD
La copie de code est la suivante:var isUpportTBodyInnerHtml = function () {
var table = document.CreateElement ('Table')
var tbody = document.CreateElement ('tbody')
table.APPEndChild (tbody)
var boo = true
essayer{
tbody.innerhtml = '<tr> </tr>'
} catch (e) {
boo = false
}
retourner boo
} ()
alerte (iSupportTbodyInnerHtml)
Pour IE6-IE9, si vous souhaitez définir l'InnerHTML de TBODY, vous pouvez utiliser la méthode alternative suivante
La copie de code est la suivante:fonction settrowinnerhtml (tbody, html) {
var div = document.CreateElement ('div')
div.innerhtml = '<Specd>' + html + '</ table>'
while (tbody.firstchild) {
tbody.removechild (tbody.firstchild)
}
tbody.appendchild (div.firstchild.firstchild)
}
Utilisez un div pour contenir une table, puis supprimez tous les éléments du TBODY, et enfin ajoutez le premier élément du premier élément du div au TBODY, c'est-à-dire la table div> tr.
Bien sûr, il existe une version plus rationalisée, qui utilise directement la méthode RemplaceChild pour remplacer
La copie de code est la suivante:fonction settrowinnerhtml (tbody, html) {
var div = document.CreateElement ('div')
div.innerhtml = '<Specd>' + html + '</ table>'
tbody.parentnode.replacechild (div.firstchild.firstchild, tbody)
}
À partir de l'enregistrement MSDN, l'InnerHTML de Col, Colgroup, Frameset, HTML, Head, Style, Table, TFOOT, Thead, Title et TR sont tous en lecture seule (IE6-IE9).
La propriété InnerHTML est en lecture seule sur le Col, Colgroup, Frameset, HTML, Head, Style, Table, TBODY, TFOOT, THEAD, Title et TR.
Vous pouvez modifier la valeur de l'élément de titre à l'aide de la propriété document.title.
Pour modifier le contenu de la table, des éléments TFOOT, THEAD et TR, utilisez le modèle d'objet de table décrit dans les tables de construction dynamiquement. Cependant, pour modifier le contenu d'une cellule particulière, vous pouvez utiliser InnerHTML.