Ajouter des elements de facon dynamique

Mon idée est que cliquer sur le bouton appelle une fonction JavaScript
qui va ouvrir ou fermer le <div> "details" en changeant sa propriété
style.display.

[ publication croisée sur fciwa et fclj, suivi sur fcl.javascript ]


Bonjour,

Je suis en train de reprendre un code JavaScript un peu vieillot, et
j'aimerais le moderniser tout en l'améliorant.


En particulier, j'essaye de faire la chose suivante : au moment de la
génération de la page HTML, rajouter N <div> dans un formulaire, chaque
<div> (appelons-le "conteneur") contenant la chose suivante :
- un <input type="checkbox"> suivi d'une ligne de texte ;
- un <button type="button"> ;
- un autre <div> (appelons-le "details") contenant des détails sur
l'ensemble.

Mon idée est que cliquer sur le bouton appelle une fonction JavaScript
qui va ouvrir ou fermer le <div> "details" en changeant sa propriété
style.display.

Je ne tiens pas particulièrement à ce que cela fonctionne sur Netscape 4
ou Internet Explorer 4, mais je voudrais que cela marche au moins sur
les navigateurs modernes (Netscape 7, Mozilla, Opera, ...) sans oublier
Internet Explorer 6.


La première version du code JavaScript générait le HTML à coups de
document.write() ou document.writeln() mais cela ne me semble pas très
propre, et j'aimerais bien utiliser plutôt des trucs du genre de
document.createElement(), xxx.appendChild(), etc. si c'était possible.
J'ai réussi à faire marcher la chose dans Netscape 7, mais cela ne
marche malheureusement pas avec IE6. Comment avancer ?

Note : si la réponse est RTFM, je veux bien, mais justement je cherche
un bon manuel. Le meilleur que j'aie trouvé jusqu'à présent est
<http://fr.selfhtml.org/> mais je n'y ai pas trouvé de spécifications
complètes. Je n'arrive pas non plus à trouver sur <http://www.w3.org>.

En particulier, j'essaye de faire la chose suivante : au moment de la
génération de la page HTML, rajouter N <div> dans un formulaire, chaque
<div> (appelons-le "conteneur") contenant la chose suivante :
- un <input type="checkbox"> suivi d'une ligne de texte ;
- un <button type="button"> ;
- un autre <div> (appelons-le "details") contenant des détails sur
l'ensemble.

j'aimerais bien utiliser plutôt des trucs du genre de
document.createElement(), xxx.appendChild(), etc. si c'était possible.
J'ai réussi à faire marcher la chose dans Netscape 7, mais cela ne
marche malheureusement pas avec IE6. Comment avancer ?

je cherche un bon manuel

. Le meilleur que j'aie trouvé jusqu'à présent est
<http://fr.selfhtml.org/> mais je n'y ai pas trouvé de spécifications
complètes. Je n'arrive pas non plus à trouver sur <http://www.w3.org>.

Olivier Miakinen <om+news@miakinen.net> a écrit

Mon idée est que cliquer sur le bouton appelle une fonction JavaScript
qui va ouvrir ou fermer le <div> "details" en changeant sa propriété
style.display.

Et document.getElementById('toto').style.display = 'none' (ou block), ça ne
fonctionne pas ?

Si j'ai bien compris les div sont ajoutés par script ? Dans ce cas, je
suggérerai d'en inclure un caché (display: none) et de le cloner autant
de fois que nécessaire (il existe une méthode DOM cloneNode() pour cela),
changer l'attribut id du nouveau div et l'insérer dans le document

Mon idée est que cliquer sur le bouton appelle une fonction JavaScript
qui va ouvrir ou fermer le <div> "details" en changeant sa propriété
style.display.

Cela fonctionne sur tous les navigateurs cités plus bas.

[...]
J'ai réussi à faire marcher la chose dans Netscape 7, mais cela ne
marche malheureusement pas avec IE6. Comment avancer ?

Surprenant ! IE6 supporte les méthodes citées. Les problèmes surviennent
principalement dans l'ajout d'attributs, en particulier les gestionnaires
d'événements pour lesquels il vaut mieux utiliser une syntaxe (conforme
au DOM2 HTML si l'élément accepte ces attributs) du type
elt.onclick=function(){//le code}, plutôt que d'utiliser
setAttribute("onclick", "//le code") ou encore les méthodes dédiées aux
gestionnaires d'événements DOM2 qui ne sont pas supportées par IE6.

element2.onclick = Dynamique; // les deux

element2.onclick=function(){ Dynamique(1); }; // les deux

Tu noteras que le dernier essai est celui de ta réponse. Bon, en fait,
j'ai fini par trouver une solution, mais qui me semble tellement laide
que je me demande si on ne peut vraiment pas l'améliorer :

eval("element2.onclick=function(){ Dynamique("+idx+"); }");

[...]
Eh bien voilà exactement mon problème. [...]

eval("element2.onclick=function(){ Dynamique("+idx+"); }");

Le problème est le passage d'un paramètre à la fonction ? Le eval est mal
considéré et, à vrai dire, au moins les 3/4 du temps inutile.

Pour déclarer une fonction on utilise soit l'instruction function soit
le constructeur Function (avec majuscule) qui attend une chaîne de
caractères en argument.

J'écrirai donc plutôt :

element2.onclick=Function("Dynamique("+idx+");");

D'un autre côté, si idx sert uniquement à repérer l'élément cliqué, c'est
un peu inutile, puisque le onclick a comme contexte (son 'this') l'objet
appelant. En écrivant ainsi :

element2.onclick=function(){Dynamique(this);};

dans Dynamique le paramètre récupéré est l'objet HTML cliqué dont on peut
interroger l'id, le parentNode et tutti quanti.

Un exemple valant mieux... [...]

En voilà un autre. Je crée un <input type="checkbox"> et je voudrais
qu'il soit coché par défaut. Chacune des cinq lignes suivantes
fonctionne avec Mozilla, mais aucune avec Internet Explorer :

element2.setAttribute("checked", "checked");
element2.setAttribute("checked", true);
element2.checked = "checked";
element2.checked = true;
eval('element2.checked = "checked"');