Acceder au contenu d'une balise span avec replace()

**EIN-LESER** · 21/10/2011, 12h10

Bonjour a tous

Voila j'ai un petit soucis certainement suite a une bêtise a moi

J'ai ine balise li dans la quelle il y a une balise span ayant une id, qui contient un lien <a>

Ce que je voudrais faire c'est accéder a la balise dans le span et changer ce qui y est contenus.

Pour commencer j'ai essayé un:

Code :

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

1
2
 
document.write(document.getElementById("_PR"));

Pour voir si sa m'affiche bien ce que je cherche
Il me dit :[object HTMLSpanElement]

Quand j'ai essayé un:

Code :

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

1
2
 
document.write(document.getElementById("_PR").value);

Il me dit not defind

Si quelqun a une idée merci d'avance

En fait ce que je veux faire dans certains cas c'est de prendre ma balise <a>

Code :

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

1
2
 
<li><span id="_PR"><a href="/category/pr" >PR</a></span></li>

Et la transformer en balise <h3>

Code :

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

1
2
 
<li><span id="_PR"><h3 >PR</a></span></h3>

**RomainVALERI** · 21/10/2011, 12h18

Envoyé par EIN-LESER

document.write

...mène à...

Envoyé par EIN-LESER

Oublie définitivement cette fonction et crée tes éléments avec les méthodes DOM.

**javatwister** · 21/10/2011, 12h22

Code :

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

<li><span id="_PR"><a href="/category/pr" >PR</a></span></li>

admettons, mais là

Code :

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

<li><span id="_PR"><h3 >PR</a></span></h3>

tu perds ton sang-froid;

vois replaceChild en tout cas, surtout que ton span a un id (même s'il est en majuscules...)

**EIN-LESER** · 21/10/2011, 12h22

Je ne crée rien avec document.write

Il me sert seulement a vérifier ce qui se trouve a cet emplacement pour debug

Cette méthode n'est jamais utilisé dans le code final

**EIN-LESER** · 21/10/2011, 12h24

Arf sorry j'ai été trop rapide sur ce cou la lol

Code :

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

1
2
 
<li><span id="_PR"><h3>PR</h3></span></li>

Plus tôt comme sa lol

**javatwister** · 21/10/2011, 12h26

oui mais une balise block dans une balise online, ça fait quand même tache, avoue;

**EIN-LESER** · 21/10/2011, 12h28

tout a fait ok avec sa mais je l'ai fait en espérant pouvoir accéder plus facilement a l’élément

Si je donne l'id a mon li je sais pas si sa sera faisable

Sorry pour mon ignorance lol ^^

**RomainVALERI** · 21/10/2011, 12h29

Envoyé par EIN-LESER

Je ne crée rien avec document.write

Il me sert seulement a vérifier ce qui se trouve a cet emplacement pour debug

Cette méthode n'est jamais utilisé dans le code final

OK ^^ admettons... mais si je peux me permettre, c'est la méthode de debug la plus contraignante/peu fiable/lente que j'aie entendu... à la limite, fais des alert, au mieux utilise Firebug...

Envoyé par EIN-LESER

Si je donne l'id a mon li je sais pas si sa sera faisable

Sans problème

(d'ailleurs moi c'est toujours au <li> que je trouve les meilleures id

)

**javatwister** · 21/10/2011, 12h31

Envoyé par EIN-LESER

tout a fait ok avec sa mais je l'ai fait en espérant pouvoir accéder plus facilement a l’élément

Si je donne l'id a mon li je sais pas si sa sera faisable

**javatwister** · 21/10/2011, 12h32

certes Romain, le li crée des liens;

**EIN-LESER** · 21/10/2011, 12h42

J'ai essaye comme sa:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type="text/javascript">
									var doc
									doc=document.location.href.split("/")
									//Si l'index quatre correspond a pr
									if (doc[4]=='pr'){
										var text_lien = document.createTextNode('<a href="/category/pr" >PR</a>');
										var text_titre = document.createTextNode('<h3 >PR</h3>');
										document.getElementById("PR").replaceChild(text_titre, document.getElementById("PR").firstChild);				
 
									}
									if (doc[4]!='pr'){
										var text_lien = document.createTextNode('<a href="/category/pr" >PR</a>');
										var text_titre = document.createTextNode('<h3 >PR</h3>');
										document.getElementById("PR").replaceChild(text_lien, document.getElementById("PR").firstChild);										
 
									}
								</script>

Cela m'affiche les balises dans la page.

Je vais voire si il existe autre chose que .createTextNode

**RomainVALERI** · 21/10/2011, 12h55

Code :

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

1
2
3
4
5
//var text_lien = document.createTextNode('<a href="/category/pr" >PR</a>');
 
var text_lien = document.createElement("A");
text_lien.href = "/category/pr";
text_lien.appendChild(document.createTextNode("PR"));

**EIN-LESER** · 21/10/2011, 13h05

Sa marche

Je t'embrasserait si tu étais une fille lol

Par contre pourrais tu me donner quelques explications la dessus car je l'ai colle mais j'avoue ne pas tout comprendre sur ce coup.

Je pensais être oblige de passer par getElementById

Comment cela trouve l'endroit ou il doit remplacer le texte

Il va falloir que j'en remplace toute une liste comme sa dans un bloc de conditions. Si je comprends pas je peux pas adapter.

Sorry parfois je suis un peux lent lol

**EIN-LESER** · 21/10/2011, 14h24

Alors pour les liens sa marche du tonnerre

Par contre pas pour les balises <h3>

Si j'essaye de faire les balises dans le changement sa m'affiche les balises dans la page

Je pourrais tres bien faire sa:

Code :

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

1
2
3
4
5
 
if (doc[4]=='pr'){
										var text_lien = document.createTextNode('<a href="/category/pr" >PR</a>');
										var text_titre = document.createTextNode('PR');
										document.getElementById("PR").replaceChild(text_titre, document.getElementById("PR").firstChild);

Le mettre en dur mais j'ai malheureusement besoin d'une id pour la suite de mes traitement.

**RomainVALERI** · 21/10/2011, 14h35

Envoyé par EIN-LESER

Sa marche

Je t'embrasserait si tu étais une fille lol

Mais t'arrive trop tard, je suis déjà marié

Bon, plus sérieusement, je n'ai rien compris à la suite, ni au message qui suit...

Avec des extraits au compte-gouttes, je crois qu'on va galérer un moment, tu peux poster la page complète ?

**EIN-LESER** · 21/10/2011, 14h53

Sorry lol

Sa c'est la page avec changements:

Code :

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

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
 
{% extends "base2.html" %}
{% load rabidratings_extras %}
{% load comments %}
{% load visits_tags %}
<script type="text/javascript">
 
 
 
 
	</script>
{% block extra_js %}
{% endblock %}
{% block content %}
	<script type="text/javascript">
		animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
		animatedcollapse.ontoggle=function($, divobj, state){
		}
		animatedcollapse.init()
 
 
 
 
	</script>
 
	{% rating_header %}
	<div id="layout_body">
		<div id="main_wrapper_outer">
			<div id="main_wrapper_inner">
				<div class="center_wrapper">		
					<table width="100%">	
						<tr>
							<td VALIGN =TOP width="15%"><center>
								</br></br>
								<ul id="menu15" class="sm">									
									<li><a href="/">Toutes</a></li>
									<li id="PR"><a href="/category/pr" >PR</a></li>							
									<li id="SE-SF" ><a href="/category/se-sf">SE/SF</a></li>
									<li id="EE" ><a href="/category/ee">EE</a></li>
									<li id="ESSAIS" ><a href="/category/Essais">Essais</a></li>
									<li id="TL" ><a href="/category/tl">TL</a></li>
									<li id="EG-LG-EV" ><a href="/category/eg-lg-ev">EG/LG/EV</a></li>
									<li id="OA" ><a href="/category/oa">OA</a></li>
									<li id="TE" ><a href="/category/te">TE</a></li>
									<li id="BAT" ><a href="/category/bat">Bat</a></li>
									<li id="CDP-CEP" ><a href="/category/cdp-cep">CdP/Cep</a></li> 				
									<li id="Expl" ><a href="/category/expl">Expl</a></li>
								</ul>
								</center>
							</td>
							<td width="10%">
							</td>
							<td width="90%">
									<strong>TOP 10 {{slug}} | <a href="/blog/category/{{slug}}">Plus details</strong></a></br></br>		
								<ul id="countrytabs" class="shadetabs">
									<li><a href="/derniers2/{{slug}}" rel="countrycontainer">Derniers Articles</a></li>
									<li><a href="/notes2/{{slug}}" rel="countrycontainer">Les mieux notes</a></li>
									<li><a href="/toppopularite2/{{slug}}" rel="countrycontainer" >Les + lus</a></li>
									<li><a href="/topprix2/{{slug}}" rel="countrycontainer" >Les + chers</a></li>
                                    <li><a href="/commentaire/" rel="countrycontainer">Commentaire</a></li>
								</ul>
 
								<div id="countrydivcontainer" style="border:1px solid gray; width:650px; margin-bottom: 1em; padding: 10px">	
 
								</div>
 
								</td>	
							<script type="text/javascript">
								var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
								countries.setpersist(true)
								countries.setselectedClassTarget("link") //"link" or "linkparent"
								countries.init()
							</script>		
 
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
								<script type="text/javascript">
									var doc
									doc=document.location.href.split("/")
									//Si l'index quatre correspond a pr
									if (doc[4]=='pr'){
										var text_lien = document.createTextNode('<a href="/category/pr" >PR</a>');
										var text_titre = document.createTextNode('<span id="menu15">PR</span>');
										document.getElementById("PR").replaceChild(text_titre, document.getElementById("PR").firstChild);
									}
									if (doc[4]!='pr'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/pr";
										text_lien.appendChild(document.createTextNode("PR"));
									}
 
									//Si l'index quatre correspond a se-sf
									if (doc[4]=='se-sf'){
										var text_lien = document.createTextNode('<a href="/category/se-sf" >SE-SF</a>');
										var text_titre = document.createTextNode('SE-SF');
										document.getElementById("SE-SF").replaceChild(text_titre, document.getElementById("SE-SF").firstChild);
									}
									if (doc[4]!='se-sf'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/se-sf";
										text_lien.appendChild(document.createTextNode("SE-SF"));
 
									}
 
									//Si l'index quatre correspond a ee
									if (doc[4]=='ee'){
										var text_lien = document.createTextNode('<a href="/category/ee" >EE</a>');
										var text_titre = document.createTextNode('EE');
										document.getElementById("EE").replaceChild(text_titre, document.getElementById("EE").firstChild);
									}
									if (doc[4]!='ee'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/ee";
										text_lien.appendChild(document.createTextNode("EE"));
 
									}
 
									//Si l'index quatre correspond a Essais
									if (doc[4]=='Essais'){
										var text_lien = document.createTextNode('<a href="/category/Essais" >ESSAIS</a>');
										var text_titre = document.createTextNode('Essais');
										document.getElementById("ESSAIS").replaceChild(text_titre, document.getElementById("ESSAIS").firstChild);
									}
									if (doc[4]!='Essais'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/Essais";
										text_lien.appendChild(document.createTextNode("ESSAIS"));
 
									}
 
									//Si l'index quatre correspond a tl
									if (doc[4]=='tl'){
										var text_lien = document.createTextNode('<a href="/category/tl" >TL</a>');
										var text_titre = document.createTextNode('TL');
										document.getElementById("TL").replaceChild(text_titre, document.getElementById("TL").firstChild);
									}
									if (doc[4]!='tl'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/tl";
										text_lien.appendChild(document.createTextNode("TL"));
 
									}
 
									//Si l'index quatre correspond a eg-lg-ev
									if (doc[4]=='eg-lg-ev'){
										var text_lien = document.createTextNode('<a href="/category/eg-lg-ev" >EG-LG-EV</a>');
										var text_titre = document.createTextNode('EG-LG-EV');
										document.getElementById("EG-LG-EV").replaceChild(text_titre, document.getElementById("EG-LG-EV").firstChild);
									}
									if (doc[4]!='eg-lg-ev'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/eg-lg-ev";
										text_lien.appendChild(document.createTextNode("EG-LG-EV"));
 
									}
 
									//Si l'index quatre correspond a oa
									if (doc[4]=='oa'){
										var text_lien = document.createTextNode('<a href="/category/oa" >OA</a>');
										var text_titre = document.createTextNode('OA');
										document.getElementById("OA").replaceChild(text_titre, document.getElementById("OA").firstChild);
									}
									if (doc[4]!='oa'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/oa";
										text_lien.appendChild(document.createTextNode("OA"));
 
									}
 
									//Si l'index quatre correspond a te
									if (doc[4]=='te'){
										var text_lien = document.createTextNode('<a href="/category/te" >TE</a>');
										var text_titre = document.createTextNode('TE');
										document.getElementById("TE").replaceChild(text_titre, document.getElementById("TE").firstChild);
									}
									if (doc[4]!='te'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/te";
										text_lien.appendChild(document.createTextNode("TE"));
 
									}
 
 
									//Si l'index quatre correspond a bat
									if (doc[4]=='bat'){
										var text_lien = document.createTextNode('<a href="/category/bat" >BAT</a>');
										var text_titre = document.createTextNode('BAT');
										document.getElementById("BAT").replaceChild(text_titre, document.getElementById("BAT").firstChild);
									}
									if (doc[4]!='bat'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/bat";
										text_lien.appendChild(document.createTextNode("BAT"));
 
									}
 
 
									//Si l'index quatre correspond a cdp-cep
									if (doc[4]=='cdp-cep'){
										var text_lien = document.createTextNode('<a href="/category/cdp-cep" >CDP-CEP</a>');
										var text_titre = document.createTextNode('CDP-CEP');
										document.getElementById("CDP-CEP").replaceChild(text_titre, document.getElementById("CDP-CEP").firstChild);
									}
									if (doc[4]!='cdp-cep'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/cdp-cep";
										text_lien.appendChild(document.createTextNode("CDP-CEP"));
 
									}
 
 
									//<li id="Expl" ><a href="/category/expl">Expl</a></li>
									//Si l'index quatre correspond a expl
									if (doc[4]=='expl'){
										var text_lien = document.createTextNode('<a href="/category/expl" >Expl</a>');
										var text_titre = document.createTextNode('Expl');
										document.getElementById("Expl").replaceChild(text_titre, document.getElementById("Expl").firstChild);
									}
									if (doc[4]!='expl'){
										var text_lien = document.createElement("A");
										text_lien.href = "/category/expl";
										text_lien.appendChild(document.createTextNode("Expl"));
 
									}
 
 
 
 
 
 
 
 
 
 
 
								</script>	
 
{% endblock %}

Mon soucis c'est que quand je remplace le lien par un texte brut dans mes conditions is== je n'ai plus de balises aux quelles appliques mon css et c'est genant.

J'ai essaye de lettre ceci dans la condition:

Code :

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

1
2
3
4
5
 
if (doc[4]=='se-sf'){
										var text_lien = document.createTextNode('<a href="/category/se-sf" >SE-SF</a>');
										var text_titre = document.createTextNode('<span>SE-SF</span>');
										document.getElementById("SE-SF").replaceChild(text_titre, document.getElementById("SE-SF").firstChild);

T'enerve pas lol span ou autre chose juste pour avoir acces

Mais sa m'affiche les balises sur la page internet.
Je me suis dit que je devais peut etre ultiliser autre chose que .createTextNode Mais j'ai pas trouve

**RomainVALERI** · 21/10/2011, 14h58

Envoyé par EIN-LESER

Mais sa m'affiche les balises sur la page internet.
Je me suis dit que je devais peut etre ultiliser autre chose que .createTextNode Mais j'ai pas trouve

Ben, on est revenus en arrière dans le temps ou quoi ?! (Doc brown, sors de ce corps

Nom de Zeus !)

Reconstitution :

1) tu nous montres un extrait qui pose ce problème : balise affichée en texte au lieu d'être interprétée comme tu l'attendais.

2) Je te propose de créer ton élément en DOM avec createElement au lieu de createTextNode.

3) Tu me dis ça marche.

4) Retournez à l'étape 1.

**EIN-LESER** · 21/10/2011, 15h27

J'ai essaye avec
Mais sa marche pas du tout. pour la methode pour les liens g genial
je dois peut etre ultiliser autre chose que:
replaceChild

J'ai testé avec

Code :

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

1
2
3
4
5
6
 
 if (doc[4]=='se-sf'){
										var text_lien = document.createElement("div");
										text_lien.innerHTML = "<h3>SE-SF</h3>";
										//text_lien.href = "/category/se-sf";
										text_lien.appendChild(document.createTextNode("SE-SF"));

Mais sa me garde le lien comme si de rien etais

**RomainVALERI** · 21/10/2011, 16h01

Envoyé par EIN-LESER

Mais sa me garde le lien comme si de rien etais

Le lien est créé, il est nickel*

Par contre, il n'existe que dans la mémoire du navigateur, il n'a pas été rattaché à l'arbre

Il manque quelque chose comme (à adapter selon l'id de l'élément "parent") :

Code :

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

document.getElementById("idDuParent").appendChild(text_lien);

* à cette exception près, tant qu'à suivre une méthode, autant la suivre partout pour des raisons de cohérence :

Code :

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

1
2
3
4
//text_lien.innerHTML = "<h3>SE-SF</h3>";
var h3 = document.createElement("H3");
h3.appendChild(document.createTextNode("SE-SF"));
text_lien.appendChild(h3);

**EIN-LESER** · 24/10/2011, 12h02

Finalement j'ai fait plus simple.

Je transforme le lien en boutton et je lui applique un css a la barbare.

C'est pas très classe mais sa marche bien

Acceder au contenu d'une balise span avec replace()

JavaScript

Discussions similaires

Partager

Partager