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

Version imprimable

Voir 40 message(s) de cette discussion en une page

21/10/2011, 12h10
EIN-LESER

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

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

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:

1 2 document.write(document.getElementById("_PR"));
Pour voir si sa m'affiche bien ce que je cherche
Il me dit :[object HTMLSpanElement] :calim2:

Quand j'ai essayé un:
Code:

1 2 document.write(document.getElementById("_PR").value);
Il me dit not defind :cry:

Si quelqun a une idée merci d'avance :oops:

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

1 2 <li><span id="_PR"><a href="/category/pr" >PR</a></span></li>
Et la transformer en balise <h3>
Code:

1 2 <li><span id="_PR"><h3 >PR</a></span></h3>
:ouin:
21/10/2011, 12h18
RomainVALERI

Citation:

Envoyé par EIN-LESER

document.write

...mène à...

Citation:

Envoyé par EIN-LESER

:ouin:

:aie:

Oublie définitivement cette fonction et crée tes éléments avec les méthodes DOM. :)
21/10/2011, 12h22
javatwister

Citation:

Code:

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

admettons, mais là

Citation:

Code:

<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...)
21/10/2011, 12h22
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
21/10/2011, 12h24
EIN-LESER
Arf sorry j'ai été trop rapide sur ce cou la lol
Code:

1 2 <li><span id="_PR"><h3>PR</h3></span></li>
Plus tôt comme sa lol
21/10/2011, 12h26
javatwister

oui mais une balise block dans une balise online, ça fait quand même tache, avoue;
21/10/2011, 12h28
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

Sorry pour mon ignorance lol ^^
21/10/2011, 12h29
RomainVALERI

Citation:

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...

Citation:

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 :mouarf:)
21/10/2011, 12h31
javatwister

Citation:

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

:cfou: :weird:
21/10/2011, 12h32
javatwister

certes Romain, le li crée des liens;

J'ai essaye comme sa:

Code:

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

:nono:

Code:

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"));

21/10/2011, 13h05
EIN-LESER

:ccool: Sa marche :ccool:

Je t'embrasserait si tu étais une fille lol :mouarf:

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 :calim2:

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

Alors pour les liens sa marche du tonnerre :ccool:

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 :cry:

Je pourrais tres bien faire sa:
Code:

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.

21/10/2011, 14h35
RomainVALERI

Citation:

Envoyé par EIN-LESER

:ccool: Sa marche :ccool:

Je t'embrasserait si tu étais une fille lol :mouarf:

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

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

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

Sorry lol

Sa c'est la page avec changements:

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
 
{% 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:

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 :oops:

21/10/2011, 14h58
RomainVALERI

Citation:

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 :oops:

:koi:

Ben, on est revenus en arrière dans le temps ou quoi ?! (Doc brown, sors de ce corps :fou: 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. :ouin:

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:

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

21/10/2011, 16h01
RomainVALERI
Citation:

Envoyé par EIN-LESER

Mais sa me garde le lien comme si de rien etais

Le lien est créé, il est nickel* :mrgreen: 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:

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:

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);
24/10/2011, 12h02
EIN-LESER

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 :ccool:

Voir 40 message(s) de cette discussion en une page