ajouter automatiquement du code HTML juste derriere tous les textareas d'une page

Laurent vilday

19/06/2007 à 19:43

je suis plutot débutant en javascript et je n'arrive pas à faire ceci:
ajouter automatiquement du code HTML juste derriere tous les textareas d'une
page.

Toujours plusieurs façons de faire les choses, en voici une.

Récupérer les élements :
document.getElementByTagName()
<http://developer.mozilla.org/en/docs/DOM:document.getElementsByTagName>

Boucler sur les élément :
for ( ) ...
<http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Statements:for>

Créer un nouvel élément :
document.createElement()
<http://developer.mozilla.org/en/docs/DOM:document.createElement>

Créer du texte :
document.createTextNode()
<http://developer.mozilla.org/en/docs/DOM:document.createTextNode>

Insérer un élément :
element.insertBefore()
<http://developer.mozilla.org/en/docs/DOM:element.insertBefore>

Connaitre l'élément immédiatement après le textarea en cours de traitement :
element.nextSibling
<http://developer.mozilla.org/en/docs/DOM:element.nextSibling>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insérer qqchose après tous les textareas</title>
<script type="text/javascript">
window.onload = function()
{
var all, i, txtarea, ajout;
if ( document.getElementsByTagName )
{
all = document.getElementsByTagName('TEXTAREA');
for ( i = 0; i < all.length; i++ )
{
txtarea = all[i];
ajout = document.createElement('span');
ajout.appendChild(document.createTextNode('ajouter : ' + i));
txtarea.parentNode.insertBefore(ajout, txtarea.nextSibling);
}
}
};
</script>

</head>
<body>

<form>
<textarea name="uno"></textarea><br>
<textarea name="dos"></textarea><br>
<textarea name="tres"></textarea><br>
<textarea name="quatro"></textarea><br>
</form>

</body>
</html>

--
laurent

rico

19/06/2007 à 22:21

"Laurent vilday" a écrit dans le message de news:
46781673$0$6206$

Toujours plusieurs façons de faire les choses, en voici une.
[snip]

whaou merci !

Bon, après avoir étudié ta solution et essayé de l'adapter à mon problème,
je n'arrive pas vraiment à faire simplement ce que je veux. En fait, je
voudrais rajouter tout un bout de code HTML assez long, avec pas mal de
balises. J'ai réussi à commencer un peu à coup de createElement, de
createTextNode et de createAttribute mais le code js enfle très vite.

Est-qu'il y a une fonction qui permettrait d'insérer directement tout un
bout de code HTML ?
Genre createHTMLNode('<div class="maclass">mon code html</div>') ?

Sinon est-ce que les références que tu m'as données existent en français car
je galère un peu (bon ok, pas mal en fait) en anglais.

rico

rico

19/06/2007 à 22:32

"rico" a écrit dans le message de news:
46783aa4$0$5068$

Est-qu'il y a une fonction qui permettrait d'insérer directement tout un
bout de code HTML ?

j'ai trouvé finalement: innerHTML !

rico

Bruno Desthuilliers

20/06/2007 à 09:04

"rico" a écrit dans le message de news:
46783aa4$0$5068$
Est-qu'il y a une fonction qui permettrait d'insérer directement tout un
bout de code HTML ?

j'ai trouvé finalement: innerHTML !

Accessoirement, il existe des bibliothèques comme Prototype, JQuery ou

Mochikit qui simplifient énormément ce genre de traitements...

ASM

20/06/2007 à 18:03

"rico" a écrit dans le message de news:
46783aa4$0$5068$

Est-qu'il y a une fonction qui permettrait d'insérer directement tout
un bout de code HTML ?

j'ai trouvé finalement: innerHTML !

Accessoirement, il existe des bibliothèques comme Prototype, JQuery ou

Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on va
se dépatouiller d'usines à gaz ...

Charger toute une bibli pour une simple bouche sur des éléments de
formulaires ... ça me semble un peu hors d'échelle.

Il serai tout de même intéressant de savoir ce qu'il y a à insérer après
ces textareas, me semble-ce ?!

Bruno Desthuilliers

21/06/2007 à 08:43

"rico" a écrit dans le message de news:
46783aa4$0$5068$

Est-qu'il y a une fonction qui permettrait d'insérer directement
tout un bout de code HTML ?

j'ai trouvé finalement: innerHTML !

Accessoirement, il existe des bibliothèques comme Prototype, JQuery ou

Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on va
se dépatouiller d'usines à gaz ...

En ce qui concerne Prototype et Mochikit, ça aurait plutôt tendance à
*simplifier* l'utilisation de javascript AMHA. Et le terme d'usine à gaz
me semble très exagéré. N'aurais-tu pas comme un a priori, là ?

Charger toute une bibli pour une simple bouche sur des éléments de
formulaires ... ça me semble un peu hors d'échelle.

Pas moi, surtout si les factorisation de code déjà effectuées par la
bibliothèque permettent par ailleurs d'écrire nettement moins de code
"spécifique".

ASM

21/06/2007 à 11:34

Accessoirement, il existe des bibliothèques comme Prototype, JQuery

ou Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on va
se dépatouiller d'usines à gaz ...

En ce qui concerne Prototype et Mochikit, ça aurait plutôt tendance à
*simplifier* l'utilisation de javascript AMHA.

"simplifier" tout en "compliquant" (les docs sont quasi innexistantes)

Et le terme d'usine à gaz
me semble très exagéré. N'aurais-tu pas comme un a priori, là ?

3 réponses :
- Oui j'ai un très très fort à priori.
(renforcé par ma pas si vieille expérience du RTC)
- Attends ! charger 96ko d'une usine (prototype)
qui intègre aussi l'Ajax pour, finalement,
n'utiliser que $(), $F(), et peut-être each() .... ? ?
à mon idée il vaut mieux, soit les extraire de prototype, soit s'en
faire des personnalisations ou se contenter de ses fonctions persos.
- C'est absolument génial cette bibli ... si on en a vraiment l'usage.
Un usage tout au long du site qui en justifie le chargement !

Ha! j'ai enfin trouvé une doc en français (bon, ce n'est pas la dernière
version de prototype, mais ça peut aider)
<http://dcabasson.developpez.com/articles/javascript/ajax/documentation-prototype-1.4.0/>

Charger toute une bibli pour une simple bouche sur des éléments de
formulaires ... ça me semble un peu hors d'échelle.

Pas moi,

sans doute es-tu en ADSL 32Gb/s ?

surtout si les factorisation de code déjà effectuées par la
bibliothèque permettent par ailleurs d'écrire nettement moins de code
"spécifique".

Là, oui, je puis être d'accord.
Reste à savoir : quel est l'exact *besoin* en ce cas particulier.

Question :
Prototype, tout un tas de monde s'en sert, donc normalement il devrait
être en cache, comment se passe la gestion du cache alors qu'il y a je
ne sais combien de versions de prototype qui errent de par le Net ?
Le cache recharge t-il un nouveau prototype (celui indiqué sur la page,
c a d celui du site visité) pour chaque site visité ?
Il y a t-il un lien qui chargerait le prototype du jour disponible pour
tous qque part, et que se passera t-il lorsque ce lien sera mort ?
Mêmes questions pour les autres biblis.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Accessoirement, il existe des bibliothèques comme Prototype, JQuery

ou Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on va
se dépatouiller d'usines à gaz ...

En ce qui concerne Prototype et Mochikit, ça aurait plutôt tendance à
*simplifier* l'utilisation de javascript AMHA.

"simplifier" tout en "compliquant" (les docs sont quasi innexistantes)

Et le terme d'usine à gaz
me semble très exagéré. N'aurais-tu pas comme un a priori, là ?

3 réponses :
- Oui j'ai un très très fort à priori.
(renforcé par ma pas si vieille expérience du RTC)
- Attends ! charger 96ko d'une usine (prototype)
qui intègre aussi l'Ajax pour, finalement,
n'utiliser que $(), $F(), et peut-être each() .... ? ?
à mon idée il vaut mieux, soit les extraire de prototype, soit s'en
faire des personnalisations ou se contenter de ses fonctions persos.
- C'est absolument génial cette bibli ... si on en a vraiment l'usage.
Un usage tout au long du site qui en justifie le chargement !

Ha! j'ai enfin trouvé une doc en français (bon, ce n'est pas la dernière
version de prototype, mais ça peut aider)
<http://dcabasson.developpez.com/articles/javascript/ajax/documentation-prototype-1.4.0/>

Charger toute une bibli pour une simple bouche sur des éléments de
formulaires ... ça me semble un peu hors d'échelle.

Pas moi,

sans doute es-tu en ADSL 32Gb/s ?

surtout si les factorisation de code déjà effectuées par la
bibliothèque permettent par ailleurs d'écrire nettement moins de code
"spécifique".

Là, oui, je puis être d'accord.
Reste à savoir : quel est l'exact *besoin* en ce cas particulier.

Question :
Prototype, tout un tas de monde s'en sert, donc normalement il devrait
être en cache, comment se passe la gestion du cache alors qu'il y a je
ne sais combien de versions de prototype qui errent de par le Net ?
Le cache recharge t-il un nouveau prototype (celui indiqué sur la page,
c a d celui du site visité) pour chaque site visité ?
Il y a t-il un lien qui chargerait le prototype du jour disponible pour
tous qque part, et que se passera t-il lorsque ce lien sera mort ?
Mêmes questions pour les autres biblis.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Vous avez filtré cet utilisateur ! Consultez son message

Accessoirement, il existe des bibliothèques comme Prototype, JQuery

ou Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on va
se dépatouiller d'usines à gaz ...

En ce qui concerne Prototype et Mochikit, ça aurait plutôt tendance à
*simplifier* l'utilisation de javascript AMHA.

"simplifier" tout en "compliquant" (les docs sont quasi innexistantes)

Et le terme d'usine à gaz
me semble très exagéré. N'aurais-tu pas comme un a priori, là ?

3 réponses :
- Oui j'ai un très très fort à priori.
(renforcé par ma pas si vieille expérience du RTC)
- Attends ! charger 96ko d'une usine (prototype)
qui intègre aussi l'Ajax pour, finalement,
n'utiliser que $(), $F(), et peut-être each() .... ? ?
à mon idée il vaut mieux, soit les extraire de prototype, soit s'en
faire des personnalisations ou se contenter de ses fonctions persos.
- C'est absolument génial cette bibli ... si on en a vraiment l'usage.
Un usage tout au long du site qui en justifie le chargement !

Ha! j'ai enfin trouvé une doc en français (bon, ce n'est pas la dernière
version de prototype, mais ça peut aider)
<http://dcabasson.developpez.com/articles/javascript/ajax/documentation-prototype-1.4.0/>

Charger toute une bibli pour une simple bouche sur des éléments de
formulaires ... ça me semble un peu hors d'échelle.

Pas moi,

sans doute es-tu en ADSL 32Gb/s ?

surtout si les factorisation de code déjà effectuées par la
bibliothèque permettent par ailleurs d'écrire nettement moins de code
"spécifique".

Là, oui, je puis être d'accord.
Reste à savoir : quel est l'exact *besoin* en ce cas particulier.

Question :
Prototype, tout un tas de monde s'en sert, donc normalement il devrait
être en cache, comment se passe la gestion du cache alors qu'il y a je
ne sais combien de versions de prototype qui errent de par le Net ?
Le cache recharge t-il un nouveau prototype (celui indiqué sur la page,
c a d celui du site visité) pour chaque site visité ?
Il y a t-il un lien qui chargerait le prototype du jour disponible pour
tous qque part, et que se passera t-il lorsque ce lien sera mort ?
Mêmes questions pour les autres biblis.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

jeremie fouche

21/06/2007 à 16:10

Question :
Prototype, tout un tas de monde s'en sert, donc normalement il devrait
être en cache, comment se passe la gestion du cache alors qu'il y a je
ne sais combien de versions de prototype qui errent de par le Net ?
Le cache recharge t-il un nouveau prototype (celui indiqué sur la page,
c a d celui du site visité) pour chaque site visité ?
Il y a t-il un lien qui chargerait le prototype du jour disponible pour
tous qque part, et que se passera t-il lorsque ce lien sera mort ?
Mêmes questions pour les autres biblis.

J'utilise prototype depuis un moment dans ma boite, et le problème ne
c'est pas (trop) posé. Dans le cadre d'une appli d'entreprise, ca peut
ce concevoir (non ?).

Je t'accorde que je ne m'étais jamais posé la question pour des sites en
ligne sur le web. Mais je te retourne la question quand même pour tes
scripts perso que tu modifies...

En tout cas, ta réflexion est intéressante.
Une réponse juste pour rire (et surtout pour ceux qui ont du gros débit)
: un header no-cache (ou expire 0, je ne sais plus trop de tête).

--
Jérémie

Bruno Desthuilliers

21/06/2007 à 16:27

Accessoirement, il existe des bibliothèques comme Prototype, JQuery

ou Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on
va se dépatouiller d'usines à gaz ...

En ce qui concerne Prototype et Mochikit, ça aurait plutôt tendance à
*simplifier* l'utilisation de javascript AMHA.

"simplifier" tout en "compliquant" (les docs sont quasi innexistantes)

Pardon ???

http://www.prototypejs.org/api
http://www.prototypejs.org/learn
http://mochikit.com/doc/html/MochiKit/index.html
http://docs.jquery.com/Main_Page

T'es carrément de mauvaise foi, là.

Et le terme d'usine à gaz me semble très exagéré. N'aurais-tu pas
comme un a priori, là ?

3 réponses :
- Oui j'ai un très très fort à priori.

Ca se voit.

(renforcé par ma pas si vieille expérience du RTC)
- Attends ! charger 96ko d'une usine (prototype)
qui intègre aussi l'Ajax pour, finalement,
n'utiliser que $(), $F(), et peut-être each() .... ? ?

T'inquiète, t'a vite fait d'en utiliser bien plus, même si tu ne fais
pas d'ajax.

à mon idée il vaut mieux, soit les extraire de prototype, soit s'en
faire des personnalisations ou se contenter de ses fonctions persos.

A mon idée, il vaut mieux utiliser une bibliothèque déjà bien conçue et
activement maintenue plutôt que de réinventer la roue.

- C'est absolument génial cette bibli ... si on en a vraiment l'usage.

Dès qu'on sort du trivial, on en trouve vite l'usage. Maintenant, c'est
sûr que si tu a du temps à perdre, tu peux aussi tout faire à la main,
hein...

Ha! j'ai enfin trouvé une doc en français (bon, ce n'est pas la dernière
version de prototype, mais ça peut aider)
<http://dcabasson.developpez.com/articles/javascript/ajax/documentation-prototype-1.4.0/>

Tu ne lis pas l'anglais technique ???

Charger toute une bibli pour une simple bouche sur des éléments de
formulaires ... ça me semble un peu hors d'échelle.

Pas moi,

sans doute es-tu en ADSL 32Gb/s ?

adsl tout ce qu'il y a de basique - j'habite à la campagne.

surtout si les factorisation de code déjà effectuées par la
bibliothèque permettent par ailleurs d'écrire nettement moins de code
"spécifique".

Là, oui, je puis être d'accord.
Reste à savoir : quel est l'exact *besoin* en ce cas particulier.

Eh oui. S'il s'agit de générer des fragments de dom et de les insérer
dans le document, personnellement, je n'hésiterais pas une seconde.

Question :
Prototype, tout un tas de monde s'en sert, donc normalement il devrait
être en cache,

Ah ???

comment se passe la gestion du cache alors qu'il y a je
ne sais combien de versions de prototype qui errent de par le Net ?

Ca marche comme pour n'importe quelle autre ressource. Le cache est lié
à l'url de la ressource. Comme l'url de *ta* version de la bibliothèque
ne change pas de page en page (enfin, normalement...), le code n'est
chargé que s'il n'est pas en cache (ou si le cache a expiré).

Si tu veux mutualiser entre plusieurs domaines, ça doit être possible
aussi en dédiant un domaine à ça et en passant une url absolue dans tes
pages.

Accessoirement, il existe des bibliothèques comme Prototype, JQuery

ou Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on
va se dépatouiller d'usines à gaz ...

En ce qui concerne Prototype et Mochikit, ça aurait plutôt tendance à
*simplifier* l'utilisation de javascript AMHA.

"simplifier" tout en "compliquant" (les docs sont quasi innexistantes)

Pardon ???

http://www.prototypejs.org/api
http://www.prototypejs.org/learn
http://mochikit.com/doc/html/MochiKit/index.html
http://docs.jquery.com/Main_Page

T'es carrément de mauvaise foi, là.

Et le terme d'usine à gaz me semble très exagéré. N'aurais-tu pas
comme un a priori, là ?

3 réponses :
- Oui j'ai un très très fort à priori.

Ca se voit.

(renforcé par ma pas si vieille expérience du RTC)
- Attends ! charger 96ko d'une usine (prototype)
qui intègre aussi l'Ajax pour, finalement,
n'utiliser que $(), $F(), et peut-être each() .... ? ?

T'inquiète, t'a vite fait d'en utiliser bien plus, même si tu ne fais
pas d'ajax.

à mon idée il vaut mieux, soit les extraire de prototype, soit s'en
faire des personnalisations ou se contenter de ses fonctions persos.

A mon idée, il vaut mieux utiliser une bibliothèque déjà bien conçue et
activement maintenue plutôt que de réinventer la roue.

- C'est absolument génial cette bibli ... si on en a vraiment l'usage.

Dès qu'on sort du trivial, on en trouve vite l'usage. Maintenant, c'est
sûr que si tu a du temps à perdre, tu peux aussi tout faire à la main,
hein...

Ha! j'ai enfin trouvé une doc en français (bon, ce n'est pas la dernière
version de prototype, mais ça peut aider)
<http://dcabasson.developpez.com/articles/javascript/ajax/documentation-prototype-1.4.0/>

Tu ne lis pas l'anglais technique ???

Charger toute une bibli pour une simple bouche sur des éléments de
formulaires ... ça me semble un peu hors d'échelle.

Pas moi,

sans doute es-tu en ADSL 32Gb/s ?

adsl tout ce qu'il y a de basique - j'habite à la campagne.

surtout si les factorisation de code déjà effectuées par la
bibliothèque permettent par ailleurs d'écrire nettement moins de code
"spécifique".

Là, oui, je puis être d'accord.
Reste à savoir : quel est l'exact *besoin* en ce cas particulier.

Eh oui. S'il s'agit de générer des fragments de dom et de les insérer
dans le document, personnellement, je n'hésiterais pas une seconde.

Question :
Prototype, tout un tas de monde s'en sert, donc normalement il devrait
être en cache,

Ah ???

comment se passe la gestion du cache alors qu'il y a je
ne sais combien de versions de prototype qui errent de par le Net ?

Ca marche comme pour n'importe quelle autre ressource. Le cache est lié
à l'url de la ressource. Comme l'url de *ta* version de la bibliothèque
ne change pas de page en page (enfin, normalement...), le code n'est
chargé que s'il n'est pas en cache (ou si le cache a expiré).

Si tu veux mutualiser entre plusieurs domaines, ça doit être possible
aussi en dédiant un domaine à ça et en passant une url absolue dans tes
pages.

Vous avez filtré cet utilisateur ! Consultez son message

Accessoirement, il existe des bibliothèques comme Prototype, JQuery

ou Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on
va se dépatouiller d'usines à gaz ...

En ce qui concerne Prototype et Mochikit, ça aurait plutôt tendance à
*simplifier* l'utilisation de javascript AMHA.

"simplifier" tout en "compliquant" (les docs sont quasi innexistantes)

Pardon ???

http://www.prototypejs.org/api
http://www.prototypejs.org/learn
http://mochikit.com/doc/html/MochiKit/index.html
http://docs.jquery.com/Main_Page

T'es carrément de mauvaise foi, là.

Et le terme d'usine à gaz me semble très exagéré. N'aurais-tu pas
comme un a priori, là ?

3 réponses :
- Oui j'ai un très très fort à priori.

Ca se voit.

(renforcé par ma pas si vieille expérience du RTC)
- Attends ! charger 96ko d'une usine (prototype)
qui intègre aussi l'Ajax pour, finalement,
n'utiliser que $(), $F(), et peut-être each() .... ? ?

T'inquiète, t'a vite fait d'en utiliser bien plus, même si tu ne fais
pas d'ajax.

à mon idée il vaut mieux, soit les extraire de prototype, soit s'en
faire des personnalisations ou se contenter de ses fonctions persos.

A mon idée, il vaut mieux utiliser une bibliothèque déjà bien conçue et
activement maintenue plutôt que de réinventer la roue.

- C'est absolument génial cette bibli ... si on en a vraiment l'usage.

Dès qu'on sort du trivial, on en trouve vite l'usage. Maintenant, c'est
sûr que si tu a du temps à perdre, tu peux aussi tout faire à la main,
hein...

Ha! j'ai enfin trouvé une doc en français (bon, ce n'est pas la dernière
version de prototype, mais ça peut aider)
<http://dcabasson.developpez.com/articles/javascript/ajax/documentation-prototype-1.4.0/>

Tu ne lis pas l'anglais technique ???

Charger toute une bibli pour une simple bouche sur des éléments de
formulaires ... ça me semble un peu hors d'échelle.

Pas moi,

sans doute es-tu en ADSL 32Gb/s ?

adsl tout ce qu'il y a de basique - j'habite à la campagne.

surtout si les factorisation de code déjà effectuées par la
bibliothèque permettent par ailleurs d'écrire nettement moins de code
"spécifique".

Là, oui, je puis être d'accord.
Reste à savoir : quel est l'exact *besoin* en ce cas particulier.

Eh oui. S'il s'agit de générer des fragments de dom et de les insérer
dans le document, personnellement, je n'hésiterais pas une seconde.

Question :
Prototype, tout un tas de monde s'en sert, donc normalement il devrait
être en cache,

Ah ???

comment se passe la gestion du cache alors qu'il y a je
ne sais combien de versions de prototype qui errent de par le Net ?

Ca marche comme pour n'importe quelle autre ressource. Le cache est lié
à l'url de la ressource. Comme l'url de *ta* version de la bibliothèque
ne change pas de page en page (enfin, normalement...), le code n'est
chargé que s'il n'est pas en cache (ou si le cache a expiré).

Si tu veux mutualiser entre plusieurs domaines, ça doit être possible
aussi en dédiant un domaine à ça et en passant une url absolue dans tes
pages.

Guy

21/06/2007 à 21:50

"rico" a écrit dans le message de news:

j'ai trouvé finalement: innerHTML !

Accessoirement, il existe des bibliothèques comme Prototype, JQuery

ou Mochikit qui simplifient énormément ce genre de traitements...

Heu ... si on n'y comprend pas trop en JS, je me demande comment on va
se dépatouiller d'usines à gaz ...

En ce qui concerne Prototype et Mochikit, ça aurait plutôt tendance à
*simplifier* l'utilisation de javascript AMHA. Et le terme d'usine à gaz
me semble très exagéré. N'aurais-tu pas comme un a priori, là ?

La question posée par ASM mérite réponse et je me permets de la reformuler :

il est évident que le DOM permet la construction de page éminemment
dynamique ! Mais quelle est la raison qui justifie, dans une page
formulaire, l'ajout de code HTML à la suite d'un textarea ?
GR

ajouter automatiquement du code HTML juste derriere tous les textareas d'une page

10 réponses

Veuillez sélectionner un problème