[DOM] Modification innerHTML impossible

Version imprimable

26/05/2007, 19h26
Christophe Charron

[DOM] Modification innerHTML impossible

Bonsoir,
sous Internet Explorer 7 (je n'ai pas testé les autres) je n'arrive pas à modifier l'innerHTML d'une balise DIV sauf si cette balise div est elle même dans une balise div !!!
Cela me permet de contourner ce problème mais j'aimerais quand même comprendre pourquoi !!!
Je n'ai bien évidemment pas de problème avec Firefox 2.0.0.3 qui est a priori plus respectueux des standards W3C

Ici la page qui réagit correctement et sous Internet Explorer et sous Firefox et là, la page qui ne fonctionne que sous Firefox et qui est à mon avis syntaxiquement correcte et normale.
Merci de m'éclairer sur cette bizarrerie
26/05/2007, 20h35
SpaceFrog

A mon avis cela veint plutot de la reference à l'objet ???
tu l'appelles comment ton div ? par son id ?

Oui par son id.

voila tout le code de la page précitée visible ici : http://test03.christophe-charron.org.../Nouveau2.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>La tache fait-elle tache?</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css" />
</head>
<body onload="ejs_aff_photos(0);">
<div id="plan" class="image"</div>
<br><CENTER><IMG id="laphoto" src='' BORDER=0></CENTER><br>
<img style="width: 1000px; height: 218px;" alt="" src="first.jpg">
<script type="text/javascript">
ejs_photo = new Array;
ejs_photo[0] = 'images/01.jpg';
ejs_photo[1] = 'images/02.jpg';
ejs_photo[2] = 'images/03.jpg';
</script>
<script type="text/javascript">
function ejs_aff_photos(num)
	{
    ejs_fin = "";
		if(num!=0) {
			ejs_fin += " | <A HREF=# onClick='ejs_aff_photos("+(num-1)+");return(false)'><span class=imgprec> Image pr&eacute;c&eacute;dente</span></A>";
		}
		if(num!=(ejs_photo.length-1)) {
			ejs_fin += " | <A HREF=# onClick='ejs_aff_photos("+(num+1)+");return(false)'><span class=imgsuiv>Image suivante </span></A>";
		}
    document.getElementById("plan").innerHTML = '<span class="accueil"><a href="../../index.html">Menu</a></span> | <a href="../graphisme.php"><span class=retour> Retour</span></a> | <a href="../depouille/depouille.php"><span class=rubprec> Rubrique pr&eacute;c&eacute;dente</span></a> | <a href="../contact/contact.php"><span class=contact> Contact</span></a>'+ejs_fin;
    try {
      document.getElementById("laphoto").setAttribute("src",ejs_photo[num]);
    } catch (e) {
		  //alert(e);
	 }
	}
</script>
</body>
</html>

27/05/2007, 08h42
SpaceFrog

et le script au milieu du div c'est normal ?
il se sentirait bien mieux dans le head ...
27/05/2007, 10h34
Christophe Charron

:? Admettons. Je pensais qu'une balise script était une balise comme une autre.
J'ai donc créé une page avec le script dans le head, mais cela ne change pas.
La nouvelle page : http://test03.christophe-charron.org.../Nouveau4.html
Et comment expliquer que la "bonne" page avec plein de "div" en trop fonctionne avec le script en plein milieu : http://test03.christophe-charron.org.../Nouveau2.html ?
27/05/2007, 10h50
SpaceFrog

je ne vois pas ou ça coince ?
Faut dire je connais pas IE ...

Et de toute façon créer des balsies avec innerHTML c'est chercher les ennuis ...

La solution c'est DOM createElement
27/05/2007, 13h37
Christophe Charron

Citation:

Envoyé par SpaceFrog

je ne vois pas ou ça coince ?

Vous voulez dire que depuis votre navigateur, le script s'exécute bien dans tous les cas et que donc vous visualisez les images ??

Citation:

Envoyé par SpaceFrog

Faut dire je connais pas IE ...

Heu ... moi non plus et je n'y tiens pas particulierement mais il y a encore une majorité d'utilisateurs de IE

Citation:

Envoyé par SpaceFrog

Et de toute façon créer des balsies avec innerHTML c'est chercher les ennuis ...

Pourquoi ?

Citation:

Envoyé par SpaceFrog

La solution c'est DOM createElement

Je suis bien d'accord.
Le code n'est pas de moi et je ne voulais pas m'embêter puisque j'avais une solution de contournement. C'est simplement pour comprendre pourquoi rajouter des balises DIV résolvaient le problème/bug ...