[DOM] getElementById + innerHTML avec IE

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'ai fais une fonction en JavaScript qui permet de changer la couleur d'un menu, donc elle marche parfaitement bien avec Firefox mais elle ne marche pas avec Internet Explorer.

Je pense que le problème vient des getElementById et des innerHTML mais je n'en suis pas sur, car ie me met comme message d'erreur :"Erreur d'execution inconnue, code 0 puis il me dit la ligne et le caractère (89 / 2), cette ligne correspondant justement au getElementById et innerHTML, après plusieurs test et quelque cheveux en moins je ne trouve pas donc je vous demande votre aide svp.

Vous pouvez aller voir le menu à cette adresse : http://polemoss.free.fr/test/ bien sur ne testez pas qu'avec firefox sinon vous allez me dire qu'il y a pas de problème ;)

Voici le code complet :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
 
<html>
<head>
<script type="text/javascript" language="javascript1.5">
function active(id){
    var menu = "";
    switch(id){
    case 1 : menu = '<li><a id="actif" href="#" onClick="active(1)">Familles</a></li>';
    //alert('ok');
    break;
 
    case 2 : menu = '<li><a id="actif" href="#" onClick="active(2)">Catégories</a></li>';
    break;
 
    case 3 : menu = '<li><a id="actif" href="#" onClick="active(3)">Voitures</a></li>';
    break;
 
    case 4 : menu = '<li><a id="actif" href="#" onClick="active(4)">Saisons</a></li>';
    break;
 
    case 5 : menu = '<li><a id="actif" href="#" onClick="active(5)">Durée</a></li>';
    break;
 
    case 6 : menu = '<li><a id="actif" href="#" onClick="active(6)">Tarifs</a></li>';
    break;
 
    case 7 : menu = '<li><a id="actif" href="#" onClick="active(7)">Options</a></li>';
    break;
 
    case 8 : menu = '<li><a id="actif" href="#" onClick="active(8)">Assurances</a></li>';
    break;
 
    case 9 : menu = '<li><a id="actif" href="#" onClick="active(9)">Tarif-Options</a></li>';
    break;
 
    case 10 : menu = '<li><a id="actif" href="#" onClick="active(10)">Tarif-Assurances</a></li>';
    break;
 
    case 11 : menu = '<li><a id="actif" href="#" onClick="active(11)">Taxe-Aero.</a></li>';
    break;
 
    case 12 : menu = '<li><a id="actif" href="#" onClick="active(12)">Banni&egrave;re</a></li>';
    break;
    }
 
    var prev = document.getElementById("cacher").value;    
    //alert("id = "+id+"\nprev = "+prev);
    document.getElementById("cacher").value = id;
    if(prev != id)
    {
    switch(prev){
    case "1" : menuP = '<li><a class="norm" href="#" onClick="active(1)">Familles</a></li>';
    break;
 
    case "2" : menuP = '<li><a class="norm" href="#" onClick="active(2)">Catégories</a></li>';
    break;
 
    case "3" : menuP = '<li><a class="norm" href="#" onClick="active(3)">Voitures</a></li>';
    break;
 
    case "4" : menuP = '<li><a class="norm" href="#" onClick="active(4)">Saisons</a></li>';
    break;
 
    case "5" : menuP = '<li><a class="norm" href="#" onClick="active(5)">Durée</a></li>';
    break;
 
    case "6" : menuP = '<li><a class="norm" href="#" onClick="active(6)">Tarifs</a></li>';
    break;
 
    case "7" : menuP = '<li><a class="norm" href="#" onClick="active(7)">Options</a></li>';
    break;
 
    case "8" : menuP = '<li><a class="norm" href="#" onClick="active(8)">Assurances</a></li>';
    break;
 
    case "9" : menuP = '<li><a class="norm" href="#" onClick="active(9)">Tarif-Options</a></li>';
    break;
 
    case "10" : menuP = '<li><a class="norm" href="#" onClick="active(10)">Tarif-Assurances</a></li>';
    break;
 
    case "11" : menuP = '<li><a class="norm" href="#" onClick="active(11)">Taxe-Aero.</a></li>';
    break;
 
    case "12" : menuP = '<li><a class="norm" href="#" onClick="active(12)">Banni&egrave;re</a></li>';
    break;
    }
    //alert(id);
    objA=document.getElementById(id);
    objA.innerHTML=menu;
 
    objP=document.getElementById(prev);
    objP.innerHTML=menuP;
    }
}
</script>
<style media="all" type="text/css">
body{
margin:0px;
padding:0px;
}
#menu {
    width:127px;
    /*height:100px;*/
    text-align:left;
    position:absolute;
    left:0px;
    top:0px;
    background-color:#00CC66;
}
#menu ul{
    padding-left:0px;
    list-style:none;
    padding-right:0px;
    position:absolute;
    top:32px;
    left:0px;
    width:127px;
 
    padding:0px;
    margin:0px;
}
#menu li {
    border-top:solid 1px #000000;
    padding:0px;
    margin:0px;
}
.norm{
    display:block;
    color:#FFFFFF;
    width:127px;
    font-family:"Trebuchet MS";
    font-size:16px;
    text-decoration:none;
    background-image:url(images/puce.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
    text-align:left;
}
.norm:hover {
    background-color:#677BAD;
    background-image:url(images/pucehover.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
}
#actif{
    display:block;
    color:#FFFFFF;
    width:127px;
    font-family:"Trebuchet MS";
    font-size:16px;
    text-decoration:none;
    background-color:#677BAD;
    background-image:url(images/pucehover.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
}
</style>
</head>
 
<body bgcolor="#21396B">
<div id="menu">
    <ul>
        <span id="1">
        <li><a id="actif" href="#" onClick="active(1)">Familles</a></li>
        </span>
        <span id="2">
        <li><a class="norm" href="#" onClick="active(2)">Cat&eacute;gories</a></li>
        </span>
        <span id="3">
        <li><a class="norm" href="#" onClick="active(3)">Voitures</a></li>
        </span>
        <span id="4">
        <li><a class="norm" href="#" onClick="active(4)">Saisons</a></li>
        </span>
        <span id="5">
        <li><a class="norm" href="#" onClick="active(5)">Dur&eacute;e</a></li>
        </span>
        <span id="6">
        <li><a class="norm" href="#" onClick="active(6)">Tarifs</a></li>
        </span>
        <span id="7">
        <li><a class="norm" href="#" onClick="active(7)">Options</a></li>
        </span>
        <span id="8">
        <li><a class="norm" href="#" onClick="active(8)">Assurances</a></li>
        </span>
        <span id="9">
        <li><a class="norm" href="#" onClick="active(9)">Tarif-Options</a></li>
        </span>
        <span id="10">
        <li><a class="norm" href="#" onClick="active(10)">Tarif-Assurances</a></li>
        </span>
        <span id="11">
        <li><a class="norm" href="#" onClick="active(11)">Taxe-Aero.</a></li>
        </span>
        <span id="12">
        <li><a class="norm" href="#" onClick="active(12)">Banni&egrave;re</a></li>
        </span>
        <li></li>
 
    </ul>
</div>
<form name="save" style="display:inline;">
<input type="text" id="cacher" value='1' />
</form>
 
</body>
</html>

J'anticipe une question pourquoi il y a t'il un switch ou les case sont du type case 1 : ... et d'autre case "1" : ...
Tous simplement parce que dans le cas ou y'a pas les guillemets l'id est comprit comme une valeur numérique et dans le cas ou il y a des guillemets l'id est comprit comme une chaine de caractère voilà pourquoi, mais et je ne pense pas que l'erreur vienne de là.

Je vous joint également le fichier html complet ça serra certainement plus pratique.

Merci d'avance

A bientôt
Antoine

10/01/2008, 08h56
SpaceFrog

il est fortement déconseillé d'avoir des id numériques ...
mais bon

ensuite faire un menu avec des li en innerHTML :vomi:

passe plutot par le DOM avec document.createElemetn('li') ...
10/01/2008, 09h20
polemoss

Merci de ta réponse,

Je vais voir comment ça marche document.createElemetn('li'), car je ne connais pas. Je vais remplacer les id numérique dans ce cas.

Je vous tiens au courant
10/01/2008, 09h42
SpaceFrog

arf...

Code:

document.createElement('li')

désolé pour la faute de frappe

J'avais vu t'inquiète par contre j'ai une erreur je te remet pas tout mon code voici le case 'en1' :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 case "en1" : var a = document.createElement('a'); a.setAttribute('href', '#'); a.setAttribute('id', 'actif'); a.setAttribute('onclick', 'active("en1")'); a.onclick = active("en1"); var aT = document.createTextNode('Famille'); a.appendChild(aT); var li = document.createElement('li'); li.appendChild(a); var span = document.getElementById('en1'); span.appendChild(li); break;
J'ai le message d'erreur suivant too much recursion à cause de la ligne
Code:

1 2 a.onclick = active("en1");
que je doit mettre pour la compatibilité ie je comprends pas parce qu'apparemment c'est bien comme ça que l'on doit écrire pour ie

10/01/2008, 10h34
SpaceFrog
remplace:
Code:

1 2 a.setAttribute('onclick', 'active("en1")'); a.onclick = active("en1");
par :

Code:

a.onclick = function(){active("en1");}
10/01/2008, 11h01
Auteur
bonjour,

Je crois bien que les fonctions setAtrribute() et getAttibute() ne sont pas reconnues par IE.

donc par la même occasion remplace
Code:

1 2 3 a.setAttribute('href', '#'); a.setAttribute('id', 'actif');
par :
Code:

1 2 3 a.href = "#"; a.id = "actif";
Par contre un truc me gène :koi:. Si je reprends ton code JS :
1. Tu crées le lien a :fleche: Ok
2. Tu crées le texte du lien puis ce noeud devient l'enfant de a :fleche: Ok
3. Tu crées le li et tu lui ajoutes le noeud a :fleche: Ok
4. Tu cibles l'élément en1 qui est visiblement un span puis le noeud li créé précédemment devient l'enfant du span 8O... L'item d'une liste (li) est l'enfant d'une balise ul pas d'un span ;)

1 pièce(s) jointe(s)

Re

Merci de vos réponses si rapide

En réponse à Auteur
a.setAttribute('href', '#');
a.setAttribute('id', 'actif');
est aussi bien reconnu par ie que ff donc ça c ok

en réponse à SpaceFrog
a.onclick = function(){active("en1");}
ça marche bien now.

Bon maintenant j'ai un autre problème du au fait que je débute sur le createElement.

Au lieu de me remplacer mes liens de menus ma fonction m'en rajoute, pas cool.

Mais en fait si j'ai bien compris avec setattribute je dois directement pouvoir remplacer la class d'une balise de plus ça simplifierait énormement le code par contre je ne vois pas comment faire lol

je vous remet le lien de la page : http://polemoss.free.fr/test

Et voici le nouveau code complet :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
 
<html>
<head>
<script type="text/javascript" language="javascript1.5">
function active(id){
    var prev = document.getElementById("cacher").value;
    //Si l'id cliqué est différent de l'id actuellement actif
    if(prev != id){
        //sauvegarde de l'id cliqué dans le hidden
        document.getElementById("cacher").value = id;
 
        //Recup des info du lien en fonction de l'id cliqué
        switch(id){
            case "en1" : var nomclick = "Famille";
            break;
 
            case "en2" : var nomclick = "Catégories";
            break;
 
            case "en3" : var nomclick = "Voitures";
            break;
 
            case "en4" : var nomclick = "Saisons";
            break;
 
            case "en5" : var nomclick = "Durée";
            break;
 
            case "en6" : var nomclick = "Tarifs";
            break;
 
            case "en7" : var nomclick = "Options";
            break;
 
            case "en8" : var nomclick = "Assurances";
            break;
 
            case "en9" : var nomclick = "Tarif-Options";
            break;
 
            case "en10" : var nomclick = "Tarif-Assurances";
            break;
 
            case "en11" : var nomclick = "Taxe-Aero.";
            break;
 
            case "en12" : var nomclick = "Bannière";
            break;
        }
 
    //Recup des info du lien en fonction de l'id actuellement actif
    //Remplacement par getElementById
 
        switch(prev){
            case "en1" : var nomprev = "Familles";
            break;
 
            case "en2" : var nomprev = "Catégories";
            break;
 
            case "en3" : var nomprev = "Voitures";
            break;
 
            case "en4" : var nomprev = "Saisons";
            break;
 
            case "en5" : var nomprev = "Durée";
            break;
 
            case "en6" : var nomprev = "Tarifs";
            break;
 
            case "en7" : var nomprev = "Options";
            break;
 
            case "en8" : var nomprev = "Assurances";
            break;
 
            case "en9" : var nomprev = "Tarif-Options";
            break;
 
            case "en10" : var nomprev = "Tarif-Assurances";
            break;
 
            case "en11" : var nomprev = "Taxe-Aero.";
            break;
 
            case "en12" : var nomprev = "Bannière";
            break;
        }
        //mise en place à l'état actif du lien cliqué
        var a = document.createElement('a');
        a.setAttribute('href', '#');
        a.setAttribute('class', 'actif');
        a.setAttribute("className","actif");
        a.setAttribute('onclick', 'active(id)');
        a.onclick = function(){active(id);}
        var aT = document.createTextNode(nomclick);
        a.appendChild(aT);
        var li = document.createElement('li');
        li.appendChild(a);
        var span = document.getElementById(id);
        span.appendChild(li);
 
        //mise en place à l'état normal du lien actuellement actif 
        var aP = document.createElement('a');
        aP.setAttribute('href', '#');
        aP.setAttribute('class', 'norm');
        aP.setAttribute("className","norm");
        aP.setAttribute('onclick', 'active(prev)');
        a.onclick = function(){active(prev);}
        var aPT = document.createTextNode(nomprev);
        aP.appendChild(aPT);
        var liP = document.createElement('li');
        liP.appendChild(aP);
        var spanP = document.getElementById(prev);
        spanP.appendChild(liP);
    }
}
</script>
<style media="all" type="text/css">
body{
margin:0px;
padding:0px;
}
#menu {
    width:127px;
    /*height:100px;*/
    text-align:left;
    position:absolute;
    left:0px;
    top:0px;
    background-color:#00CC66;
}
#menu ul{
    padding-left:0px;
    list-style:none;
    padding-right:0px;
    position:absolute;
    top:32px;
    left:0px;
    width:127px;
 
    padding:0px;
    margin:0px;
}
#menu li {
    border-top:solid 1px #000000;
    padding:0px;
    margin:0px;
}
.norm{
    display:block;
    color:#FFFFFF;
    width:127px;
    font-family:"Trebuchet MS";
    font-size:16px;
    text-decoration:none;
    background-image:url(images/puce.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
    text-align:left;
}
.norm:hover {
    background-color:#677BAD;
    background-image:url(images/pucehover.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
}
.actif{
    display:block;
    color:#FFFFFF;
    width:127px;
    font-family:"Trebuchet MS";
    font-size:16px;
    text-decoration:none;
    background-color:#677BAD;
    background-image:url(images/pucehover.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
}
</style>
</head>
 
<body bgcolor="#21396B">
<div id="menu">
    <ul>
 
        <li><a id="en1" class="actif" href="#" onClick="active('en1')">Familles</a></li>
 
        <span id="en2">
        <li><a class="norm" href="#" onClick="active('en2')">Cat&eacute;gories</a></li>
        </span>
        <span id="en3">
        <li><a class="norm" href="#" onClick="active('en3')">Voitures</a></li>
        </span>
        <span id="en4">
        <li><a class="norm" href="#" onClick="active('en4')">Saisons</a></li>
        </span>
        <span id="en5">
        <li><a class="norm" href="#" onClick="active('en5')">Dur&eacute;e</a></li>
        </span>
        <span id="en6">
        <li><a class="norm" href="#" onClick="active('en6')">Tarifs</a></li>
        </span>
        <span id="en7">
        <li><a class="norm" href="#" onClick="active('en7')">Options</a></li>
        </span>
        <span id="en8">
        <li><a class="norm" href="#" onClick="active('en8')">Assurances</a></li>
        </span>
        <span id="en9">
        <li><a class="norm" href="#" onClick="active('en9')">Tarif-Options</a></li>
        </span>
        <span id="en10">
        <li><a class="norm" href="#" onClick="active('en10')">Tarif-Assurances</a></li>
        </span>
        <span id="en11">
        <li><a class="norm" href="#" onClick="active('en11')">Taxe-Aero.</a></li>
        </span>
        <span id="en12">
        <li><a class="norm" href="#" onClick="active('en12')">Banni&egrave;re</a></li>
        </span>
        <li></li>
 
    </ul>
</div>
<form name="save" style="display:inline;">
<input type="text" id="cacher" value="en1" />
</form>
 
</body>
</html>

A toute :)

ps : en pièce jointe le code

re ps : j'ai supprimer dans le code html le span id="en1" et mi cette id sur le balise pour faire des tests

10/01/2008, 11h18
SpaceFrog

removeChild ...
10/01/2008, 11h19
jbrasselet

A ce moment, au lieu de créer un nouvel li tu peux chercher celui sur lequel l'utilisateur à cliquer et utiliser les setattribute pour surcharger la méthode onclick et les attribut class, href, etc.
10/01/2008, 11h57
polemoss

Merci jbrasselet mais comment fait on :D

Sinon j'essaie toujours avec removeChild mais j'y arrive pas

tu peux faire un truc du style :
Code:

1 2 3 4 5 6 var obj = document.getElementById(id); obj.setAttribute('href', '#'); obj.setAttribute('class', 'actif'); obj.setAttribute("className","actif"); obj.setAttribute('onclick', 'active(id)'); obj.onclick = function(){active(id);}
Par contre quand tu changeras de menu, il faudra prendre en compte que tu vas devoir remettre en forme le menu précédent avec le href et la classe...

Merci, mais j'avais trouvé avant en faite j'ai fais encore plus simple :)

Code:

1
2
3
4
 
var a = document.getElementById(id);
a.setAttribute('class','actif');
a.setAttribute("className","actif");

pour activer la couleur
et

Code:

1
2
3
4
 
var a2 = document.getElementById(prev);
a2.setAttribute('class','norm');
a2.setAttribute("className","norm");

pour désactiver la couleur

Par contre j'aurai bien aimé trouver comment faire avec removeChild() ça pourra toujours me servir par la suite :)

je vous met le code que je j'avais fait pour removechild :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
 
<html>
<head>
<script type="text/javascript" language="javascript1.5">
function active(id, id2){
    var prev = document.getElementById("cacher").value;
    var prev2 = document.getElementById("cacher2").value;
    //Si l'id cliqué est différent de l'id actuellement actif
    if(prev != id){
        //sauvegarde de l'id cliqué dans le hidden
        document.getElementById("cacher").value = id;
        document.getElementById("cacher2").value = id2;
 
        //Recup des info du lien en fonction de l'id cliqué
        switch(id){
            case "en1" : var nomclick = "Famille";
            break;
 
            case "en2" : var nomclick = "Catégories";
            break;
 
            case "en3" : var nomclick = "Voitures";
            break;
 
            case "en4" : var nomclick = "Saisons";
            break;
 
            case "en5" : var nomclick = "Durée";
            break;
 
            case "en6" : var nomclick = "Tarifs";
            break;
 
            case "en7" : var nomclick = "Options";
            break;
 
            case "en8" : var nomclick = "Assurances";
            break;
 
            case "en9" : var nomclick = "Tarif-Options";
            break;
 
            case "en10" : var nomclick = "Tarif-Assurances";
            break;
 
            case "en11" : var nomclick = "Taxe-Aero.";
            break;
 
            case "en12" : var nomclick = "Bannière";
            break;
        }
 
    //Recup des info du lien en fonction de l'id actuellement actif
    //Remplacement par getElementById
 
        switch(prev){
            case "en1" : var nomprev = "Familles";
            break;
 
            case "en2" : var nomprev = "Catégories";
            break;
 
            case "en3" : var nomprev = "Voitures";
            break;
 
            case "en4" : var nomprev = "Saisons";
            break;
 
            case "en5" : var nomprev = "Durée";
            break;
 
            case "en6" : var nomprev = "Tarifs";
            break;
 
            case "en7" : var nomprev = "Options";
            break;
 
            case "en8" : var nomprev = "Assurances";
            break;
 
            case "en9" : var nomprev = "Tarif-Options";
            break;
 
            case "en10" : var nomprev = "Tarif-Assurances";
            break;
 
            case "en11" : var nomprev = "Taxe-Aero.";
            break;
 
            case "en12" : var nomprev = "Bannière";
            break;
        }
        //mise en place à l'état actif du lien cliqué
        var a = document.createElement('a');
        a.setAttribute('href', '#');
        a.setAttribute('id', id2);
        a.setAttribute('class', 'actif');
        a.setAttribute("className","actif");
        a.setAttribute('onclick', 'active(id)');
        a.onclick = function(){active(id);}
        var aT = document.createTextNode(nomclick);
        a.appendChild(aT);
        var li = document.createElement('li');
        li.appendChild(a);
        var span = document.getElementById(id);
        var A1 = document.getElementById(id2)
        anciennoeud1 = span.removeChild(A1);
 
        span.appendChild(li);
 
        //mise en place à l'état normal du lien actuellement actif 
        var aP = document.createElement('a');
        aP.setAttribute('href', '#');
        aP.setAttribute('id', prev2);
        aP.setAttribute('class', 'norm');
        aP.setAttribute("className","norm");
        aP.setAttribute('onclick', 'active(prev)');
        a.onclick = function(){active(prev);}
        var aPT = document.createTextNode(nomprev);
        aP.appendChild(aPT);
        var liP = document.createElement('li');
        liP.appendChild(aP);
        var spanP = document.getElementById(prev);
        var A2 = document.getElementById(prev2)
        anciennoeud2 = spanP.removeChild(A2);
        spanP.appendChild(liP);
 
    }
}
</script>
<style media="all" type="text/css">
body{
margin:0px;
padding:0px;
}
#menu {
    width:127px;
    /*height:100px;*/
    text-align:left;
    position:absolute;
    left:0px;
    top:0px;
    background-color:#00CC66;
}
#menu ul{
    padding-left:0px;
    list-style:none;
    padding-right:0px;
    position:absolute;
    top:32px;
    left:0px;
    width:127px;
 
    padding:0px;
    margin:0px;
}
#menu li {
    border-top:solid 1px #000000;
    padding:0px;
    margin:0px;
}
.norm{
    display:block;
    color:#FFFFFF;
    width:127px;
    font-family:"Trebuchet MS";
    font-size:16px;
    text-decoration:none;
    background-image:url(images/puce.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
    text-align:left;
}
.norm:hover {
    background-color:#677BAD;
    background-image:url(images/pucehover.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
}
.actif{
    display:block;
    color:#FFFFFF;
    width:127px;
    font-family:"Trebuchet MS";
    font-size:16px;
    text-decoration:none;
    background-color:#677BAD;
    background-image:url(images/pucehover.jpg);
    background-position:left center;
    background-repeat:no-repeat;
    text-indent:12px;
}
</style>
</head>
 
<body bgcolor="#21396B">
<div id="menu">
    <ul>
        <span id="en1">
        <li><a id="in1" class="actif" href="#" onClick="active('en1','in1')">Familles</a></li>
        </span>
        <span id="en2">
        <li><a id="in2" class="norm" href="#" onClick="active('en2','in2')">Cat&eacute;gories</a></li>
        </span>
        <span id="en3">
        <li><a id="in3" class="norm" href="#" onClick="active('en3','in3')">Voitures</a></li>
        </span>
        <span id="en4">
        <li><a id="in4" class="norm" href="#" onClick="active('en4','in4')">Saisons</a></li>
        </span>
        <span id="en5">
        <li><a id="in5" class="norm" href="#" onClick="active('en5','in5')">Dur&eacute;e</a></li>
        </span>
        <span id="en6">
        <li><a id="in6" class="norm" href="#" onClick="active('en6','in6')">Tarifs</a></li>
        </span>
        <span id="en7">
        <li><a id="in7" class="norm" href="#" onClick="active('en7','in7')">Options</a></li>
        </span>
        <span id="en8">
        <li><a id="in8" class="norm" href="#" onClick="active('en8','in8')">Assurances</a></li>
        </span>
        <span id="en9">
        <li><a id="in9" class="norm" href="#" onClick="active('en9','in9')">Tarif-Options</a></li>
        </span>
        <span id="en10">
        <li><a id="in10" class="norm" href="#" onClick="active('en10','in10')">Tarif-Assurances</a></li>
        </span>
        <span id="en11">
        <li><a id="in11" class="norm" href="#" onClick="active('en11','in11')">Taxe-Aero.</a></li>
        </span>
        <span id="en12">
        <li><a id="in12" class="norm" href="#" onClick="active('en12','in12')">Banni&egrave;re</a></li>
        </span>
        <li></li>
 
    </ul>
</div>
<form name="save" style="display:inline;">
<input type="text" id="cacher" value="en1" />
<input type="text" id="cacher2" value="in1" />
</form>
 
</body>
</html>

Si vous voyais où est mon erreur ça serrait sympa merci encore