[HTLM / Javascript] Soucis avec document.createElement()

Version imprimable

Bonjour,

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<meta name="author" content="Marie Montigny" /> 
<meta name="date" content="09/03/2006" /> 
<meta name="sequence" content="TP Sequence 3" /> 
<style type="text/css"> 
#styleBloc {position:absolute; right:50px; top:50px; width:200px; height:50px; 
background-color:#abc; color:red; 
font-size:30px; line-height:50px; text-align:center; } 
</style> 
<script language="JavaScript" type="text/JavaScript"> 
function creerEnTete() 
{ 
        var date="Dernière modification"; 
 
        bloc = document.createElement("div"); 
        bloc.className="styleBloc"; 
        bloc.innerHTML=date; 
        alert("creerEnTete ap"); 
} 
</script> 
<title>Le titre</title> 
</head> 
<!--<body onload="creerEnTete()">--> 
<body onload="test()"> 
<h1>Titre principal</h1> 
<h2>Premier paragraphe</h2> 
<p>bla, bla, bla...</p> 
<h2>Deuxième paragraphe</h2> 
<p>bla, bla, bla...</p> 
</body> 
</html>

La page est censée afin le bla bla et surtout, le petit script (appelé dans le onload) affiche une div en haut à droite de la page.

Quand je la crée à la main

Code:

<div class=styleBloc>Test</div>

, ca fonctionne correctement, j'en déduis donc que mon CSS est correct.

Idem pour l'appele à la fonction creerEnTete car mon alert fonctionne bien.

Une idée du pourquoi ca ne s'affiche pas :?:

Merci
:)

13/03/2006, 16h55
Oluha

à déplacer dans le forum javascript

tu n'as pas ajouté ton calque dans la page!

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
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 
<style type="text/css"> 
.styleBloc {position:absolute; right:50px; top:50px; width:200px; height:50px; 
background-color:#abc; color:red; 
font-size:30px; line-height:50px; text-align:center; } 
</style> 
<script language="JavaScript" type="text/JavaScript"> 
function creerEnTete() 
{ 
        var date="Dernière modification"; 
 
        bloc = document.createElement("div"); 
        bloc.className="styleBloc"; 
        bloc.innerHTML=date; 
        cal=document.getElementById("enTete");
	cal.appendChild(bloc);
} 
</script> 
<title>Le titre</title> 
</head> 
<body >
<h1>Titre principal</h1> 
<h2>Premier paragraphe</h2> 
<p>bla, bla, bla...</p> 
<h2>Deuxième paragraphe</h2> 
<div id="enTete"></div>
<p>bla, bla, bla...</p> 
<script>
creerEnTete() ;
</script>
</body> 
</html>

:idea:

13/03/2006, 17h24
nebule

Ok, merci :!:

:)
14/03/2006, 16h35
nebule
Bonjour,

Autre petite question, si je ne veux pas utiliser
Code:

1 2 3 cal=document.getElementById("enTete"); cal.appendChild(bloc);
mais la méthode insertBefore, j'ai testé ça :
Code:

1 2 document.body.insertBefore(this.parentNode,document.body.firstChild);
mais sans succés :?:

Qu'est ce que j'ai loupé ?

Merci :)
14/03/2006, 21h50
nebule

Personne n'a d'idée :?: car j'ai cherché et pas trouvé vraiment d'exmple d'utilisation ... :|

Code:

1
2
var body = document.getElementsByTagName('body')[0];
body.insertBefore(this.parentNode, body.firstChild);

15/03/2006, 10h39
javatwister

tu aurais bien un joli message d'erreur sous ffx non? étant donné que tu insères un aïeul en tant qu'enfant...
15/03/2006, 16h22
nebule

Citation:

Envoyé par javatwister

tu aurais bien un joli message d'erreur sous ffx non? étant donné que tu insères un aïeul en tant qu'enfant...

effectivement j'ai trouvé que mes paramétres n'était pas bon :!:

Ca marche mieux maintenant mais j'ai pas d'erreur javascript :? aussi bien avec IE que firefox ... Bizzare ...