Quand innerHTML se confond avec outerHTML

**Hibou57** · 10/08/2007, 01h02

Bonsoir tous/toutes,

Je viens de remarquer un phénomène étrange, un phénomène au limite, qui peut tout à fait se produire, et pas seulement occasionelement : dans certains cas, innerHTML peut renvoyer ce qu'aurait renvoyé outerHTML.

Ce n'est pas un phénomène mysthérieux dut à une quelconque courbure de l'espace temps, mais un phénomène qui se produit tout simplement quand l'élément sur lequel on applique innerHTML n'a pas de contenu.

Dans les cas ou un élément surlequel on applique innerHTML est succeptible d'avoir un contenu strictement vide, alors il est préférable de faire plutôt

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var content;
var element;
element = ...;
content = element.innerHTML;
if (content == element.outerHTML) content = "";

La comparaison avec element.outerHTML est obligatoire, car on ne peut bien sûre pas tester un innerHTML vide, puisque celui-ci renvois alors outerHTML qui n'est pas vide.

Je constate ce phénomène avec des éléments tels que

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<DIV></DIV>

J'ai vraiment cru rêver... mais c'était bien là la source d'un bug étrange dans une application qui m'embêtait (note: je suis sous IE6).

**E.Bzz** · 10/08/2007, 09h29

Bonjour,

Envoyé par Hibou57

J'ai vraiment cru rêver...

heu ... comment dire ça ?
C'était bien le cas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<body onload="alert('/'+document.getElementById('div1').innerHTML+'/'+document.getElementById('div1').outerHTML+'/');">
<div id="div1">
</div>
</body>

m'affiche

//
<DIV id=div1></DIV>/

Mais si tu fais un document.write() au lieu d'un alert(), forcément ...

EDIT : testé aussi sous IE6
EDIT BIS : dans le doute, j'ai testé aussi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(document.getElementById('div1').innerHTML==document.getElementById('div1').outerHTML);

qui renvoie bien ... false

A+

**Hibou57** · 10/08/2007, 13h54

Envoyé par E.Bzz

Bonjour,
heu ... comment dire ça ?
C'était bien le cas

Pourtant non, et ce n'était pas possible que je l'ignore. Je faisais par exemple B.innerHTML = A.innerHTML, et quand A était vide, B se retrouvait à contenir tout B, et pas seulement son innerHTML.

J'ignore comment, mais c'est bien ce qui se passe. A l'affichage, je vois alors B être dupliqué dans A, alors que si son contenu n'est pas vide, c'est seulement le contenu de B qui est copié dans le contenu de A.

Peut-être qu'il y a quelque chose dans l'application qui laisse IE6 dans un état bizarre alors. Mais pourtant il n'y aucune erreur d'execution pendant tout ce temps.

**E.Bzz** · 10/08/2007, 14h04

Ton "A" n'était peut être pas celui que tu croyais ...

**Hibou57** · 10/08/2007, 17h36

Envoyé par E.Bzz

Ton "A" n'était peut être pas celui que tu croyais ...

Si, puisque le correctif que je donne fait que tout fonctionne normalement. Si le A n'était pas l'élément que je croyais, premièrement c'est toute l'application qui ne tournerait pas du tout rond (et je m'en serais aperçu), et en plus le correctif ne changerait rien à ce type d'erreur. Ors il fonctionne.

Mais je crois que j'ai peut-être fait une erreur de parler de cette bizarrerie, peut-être que c'est trop bizarre pour en parler comme ça.

Si j'arrive à en savoir plus (comprendre comment c'est possible), j'en reparlerai ici.

**E.Bzz** · 10/08/2007, 17h43

Envoyé par Hibou57

Si j'arrive à en savoir plus (comprendre comment c'est possible), j'en reparlerai ici.

Et avec un exemple qu'on puisse reproduire, ça serait intéressant effectivement

A+

**Auteur** · 10/08/2007, 13h09

Envoyé par Hibou57

J'ai vraiment cru rêver... mais c'était bien là la source d'un bug étrange dans une application qui m'embêtait (note: je suis sous IE6).

de toutes façons, je crois que seul IE utilise (encore) outerHTML.

Sur FF par exemple, ne reconnait que innerHTML.

Pour rappel :
http://www.developpez.net/forums/sho...d.php?t=279966

Quand innerHTML se confond avec outerHTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager