Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript insertion html et onclick

insertion html et onclick

15 réponses
Avatar
unbewusst.sein
jusqu'ici j'inserrait un bouton en html par :

#innerHTML+='<a class="button" href="javascript:void(0)"><span
id="'+id+'">'+txt+'</span></a>';

puis, juste après je faisais :
document.getElementById(id).onclick=action;

dans une function add_button_right(txt, id, action) où :
txt est le texte du bouton ;
id est son id ;
action est le "nom" symbolique de la fonction à appeller (ce n'était pas
une string; exemple d'appel :
add_button_right("Modifier","modify_item_id",modify_item);

comme; pour UN bouton; la vérif à la console me donnait son onclick à
null, et pas pour un autre bouton (souvent j'en crée deux à la fois),
j'ai changé mon code et je ne passe plus que des strings :

la function a le même nom; les mêmes paramètres excepté que cette
fois-ci action est une scring, un appel :
add_button_right("Modifier","modify_item_id","modify_item()");

la function ayant été modifiée pour :
#innerHTML+='<a class="button" href="javascript:void(0)"><span
id="'+id+'" onclick="'+action+';return false">'+txt+'</span></a>';

et donc, il n'y a plus de :
#onclick=action;

que pensez-vous de ce problème ?

je précise qu'avec ce cha,gement, la fonction modifier marche; avant;
pas de onclick, le bouton restait inactif...
--
« L'amour est la sagesse du fou et la folie du sage. »
(Samuel Johnson)
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Bol
add_button_right("Modifier","modify_item_id","modify_item()");

la function ayant été modifiée pour :
#innerHTML+='<a class="button" href="javascript:void(0)"><span
id="'+id+'" onclick="'+action+';return false">'+txt+'</span></a>';



c'est pour l'exemple le modify_item() ou tu passes des parametres ?
si c'est le cas sont-ils bien antislashés ?

pourqui ne pas mettre le onclick et id sur A ?

Bol
Avatar
unbewusst.sein
Bol wrote:


c'est pour l'exemple le modify_item() ou tu passes des parametres ?
si c'est le cas sont-ils bien antislashés ?



pas de paramètres.

pourqui ne pas mettre le onclick et id sur A ?



au départ c'était pour changer le texte dans le span.
maintenant, effectivement, comment je change tout (a, span et son texte)
il n'y a plus de raison.
d'ailleurss; en regardant bien, je pourrais vérifier que l'id est devenu
inutile...

car, si je change de bouton; avant d'en changer je mets l'innerHTML de
la div où se trouvent ces boutons à "".

bonne remarque en tk, merci !
--
« La révolution ne supprime pas les privilèges,
elle se borne à changer les privilégiés. »
(Philippe Bouvard)
Avatar
Pascal Poncet
Le 28/08/2011 09:01, Une Bévue a écrit :
jusqu'ici j'inserrait un bouton en html par :
#innerHTML+='<a class="button" href="javascript:void(0)"><span
id="'+id+'">'+txt+'</span></a>';



Beurk, manque plus que du "document.write()" ! ;-)
Non, sérieux, c'est plus une façon de coder, ça, hein ?

puis, juste après je faisais :
document.getElementById(id).onclick¬tion;



Et là, mélange des genres et des époques, avec passage par le DOM W3C.

add_button_right("Modifier","modify_item_id",modify_item);



A part le style, pas propre donc risqué, ce code doit fonctionner
normalement.

Si je récap, tu as un code du genre :

<html>
<head>
<title>Test JS</title>
<script>
function add_button(txt, id, action) {
var container = document.getElementById("test");
container.innerHTML += '<a class="button"
href="javascript:void(0)"><span id="'+id+'">'+txt+'</span></a>';
var button = document.getElementById(id);
button.onclick = action;
}
function modify_item() {
console.log("modifier");
}
</script>
</head>
<body>
<p id="test">Ajouter un lien-bouton ici : </p>
<script>
add_button("Modifier", "modify_item_id",
modify_item);modify_item);
</script>
</body>
</html>

comme; pour UN bouton; la vérif à la console me donnait son onclick à
null, et pas pour un autre bouton (souvent j'en crée deux à la fois),



Je vois pas pourquoi il serait "null", à moins que, comme la célèbre
femme en rouge, tu ne nous dises pas tout !

la function ayant été modifiée pour :
#innerHTML+='<a class="button" href="javascript:void(0)"><span
id="'+id+'" onclick="'+action+';return false">'+txt+'</span></a>';



Encore plus mochouillet, mais en même temps plus cohérent.

que pensez-vous de ce problème ?



Y en a pas, ou plutôt si, mais au niveau du design.

Pourquoi ne pas envisager ceci, à la place :

<html>
<head>
<title>Test JS</title>
<script>
function modify_item() {
console.log("modifier");
}
function appendButton(label, id, action) {
if (! ("nodeType" in this) && this.nodeType != 1) return;
var button = document.createElement("button");
button.type = "button";
button.innerHTML = label;
button.id = id;
button.onclick = action;
this.appendChild(button);
}
</script>
</head>
<body>
<p id="test">Ajouter un lien-bouton ici : </p>
<script>
var container = document.getElementById("test");
appendButton.call(container, "Modifier", "modify_item_id",
modify_item);
</script>
</body>
</html>

Et ne me dis pas que "<button>" ne s'affiche pas comme "<a><span>", tu
sauras très bien restyler comme tu le désires avec CSS.


--
Cordialement,
Pascal
Avatar
unbewusst.sein
Pascal Poncet wrote:

Le 28/08/2011 09:01, Une Bévue a écrit :
> jusqu'ici j'inserrait un bouton en html par :
> #innerHTML+='<a class="button" href="javascript:void(0)"><span
> id="'+id+'">'+txt+'</span></a>';

Beurk, manque plus que du "document.write()" ! ;-)
Non, sérieux, c'est plus une façon de coder, ça, hein ?



ben; je connais l'autre solution; par création de nodes etc...
mais bon elle est super chainte, là pour un q/span c'est ok mais par
ailleurs j'ai toute une hierarchie a-à créer alors j'ai eu une crise de
flemminge aiguë...


> puis, juste après je faisais :
> document.getElementById(id).onclick¬tion;

Et là, mélange des genres et des époques, avec passage par le DOM W3C.



ouais je sais...

> add_button_right("Modifier","modify_item_id",modify_item);

A part le style, pas propre donc risqué, ce code doit fonctionner
normalement.

Si je récap, tu as un code du genre :



oui c'est ça !

<snip />


> comme; pour UN bouton; la vérif à la console me donnait son onclick à
> null, et pas pour un autre bouton (souvent j'en crée deux à la fois),

Je vois pas pourquoi il serait "null", à moins que, comme la célèbre
femme en rouge, tu ne nous dises pas tout !



ben non, je ne vois pas ce que j'aurai pu oublier mis à part que j'ai un
test pour détermiber si je dois faire un :
#innerHTML=...
ou
#innerHTML+=...

je donne ma fonction, excatement telle qu'elle était quand elle marchait
pour un bouton et pas l'autre :
function add_button_right(txt, id, action) {
var id_exist=document.getElementById(id);
if(id_exist){
id_exist.innerHTML=txt;
id_exist.onclick¬tion;
} else {
var footer_right=document.getElementById("footer_right");
var txt_in=footer_right.innerHTML;
var rgx=/class=/g;
if(rgx.test(txt_in)) {
footer_right.innerHTML+='<a class="button"
href="javascript:void(0)"><span id="'+id+'">'+txt+'</span></a>';
} else {
footer_right.innerHTML='<a class="button"
href="javascript:void(0)"><span id="'+id+'">'+txt+'</span></a>';
}
document.getElementById(id).onclick¬tion;
}
}
function del_buttons_right() {
document.getElementById("footer_right").innerHTML="&nbsp;";
}

quand je crée deux boutons, je fais :
del_buttons_right();
add_button_right("Modifier","modify_item_id",modify_item);
add_button_right('Supprimer',"delete_item_id",delete_item);

le bout d'html associé :
<div id="footer">
<div id="footer_right">&nbsp;</div>
<div id="footer_center">
<a class="button" href="javascript:void(0)"
onclick="add_item();return false"><span
id="button_plus">+</span></a>
</div>
</div>

je suis obligé de mettre un "&nbsp;" dans "footer_right" sinon ça fou le
boxon au niveau de la présentation...

> la function ayant été modifiée pour :
> #innerHTML+='<a class="button" href="javascript:void(0)"><span
> id="'+id+'" onclick="'+action+';return false">'+txt+'</span></a>';

Encore plus mochouillet, mais en même temps plus cohérent.




et ça marche, pour les DEUX boutons...

> que pensez-vous de ce problème ?

Y en a pas, ou plutôt si, mais au niveau du design.

Pourquoi ne pas envisager ceci, à la place :

<html>
<head>
<title>Test JS</title>
<script>
function modify_item() {
console.log("modifier");
}
function appendButton(label, id, action) {
if (! ("nodeType" in this) && this.nodeType != 1) return;
var button = document.createElement("button");
button.type = "button";
button.innerHTML = label;
button.id = id;
button.onclick = action;
this.appendChild(button);
}
</script>
</head>
<body>
<p id="test">Ajouter un lien-bouton ici : </p>
<script>
var container = document.getElementById("test");
appendButton.call(container, "Modifier", "modify_item_id",
modify_item);
</script>
</body>
</html>

Et ne me dis pas que "<button>" ne s'affiche pas comme "<a><span>", tu
sauras très bien restyler comme tu le désires avec CSS.



ouais cette solution est plus propre je l'admet, par contre restyler ce
n'est pas aussi évident, ce matin j'avais essayé de créer juste un span
avec une background-image comme avec le a/span, ce n'est pas si évident,
(peut-être même pas possible avec un simple span) je regarderai un
bouton avec image...

Mais bon, si je fais ça, en propre je veux dire
(document.createElement("button") and co) du coup j'ai le reste à faire
comme ça, là j'ai une autre idée :
php me génère du xml en une string, je fais une transfo xslt dessus et
j'inserre par innerHTML=<résultat de la transfo xslt>
transfo côté serveur (php)

en tk, pour l'instant je n'ai pas trouvé pourquoi ça ne marche pas avec
deux boutons, je n'ai qu'un indice pour trouver, c'est le premier créé
qui a un #onclick à null...

et le "même" bouton, càd créé dans les mêmes conditions, s'il est seul,
ça roule...
--
« Les femmes sont extrêmes ; elles sont meilleures ou pires que
les hommes. »
(Jean de La Bruyère)
Avatar
Pascal Poncet
Le 28/08/2011 16:57, Une Bévue a écrit :
je donne ma fonction, excatement telle qu'elle était quand elle marchait
pour un bouton et pas l'autre :
function add_button_right(txt, id, action) {
var id_exist=document.getElementById(id);
if(id_exist){
id_exist.innerHTML=txt;
id_exist.onclick¬tion;
} else {
var footer_right=document.getElementById("footer_right");
var txt_in=footer_right.innerHTML;
var rgx=/class=/g;
if(rgx.test(txt_in)) {


-----------------------------------------------------------------
footer_right.innerHTML+='<a class="button"
href="javascript:void(0)"><span id="'+id+'">'+txt+'</span></a>'; <========= !!!!


-----------------------------------------------------------------
} else {
footer_right.innerHTML='<a class="button"
href="javascript:void(0)"><span id="'+id+'">'+txt+'</span></a>';
}
document.getElementById(id).onclick¬tion;
}
}
function del_buttons_right() {
document.getElementById("footer_right").innerHTML="&nbsp;";
}

quand je crée deux boutons, je fais :
del_buttons_right();
add_button_right("Modifier","modify_item_id",modify_item);
add_button_right('Supprimer',"delete_item_id",delete_item);

le bout d'html associé :
<div id="footer">
<div id="footer_right">&nbsp;</div>
<div id="footer_center">
<a class="button" href="javascript:void(0)"
onclick="add_item();return false"><span
id="button_plus">+</span></a>
</div>
</div>



Eh ben voilà, les limites de ce genre de codage !
Pour tout dire, j'ai aussi cherché un moment ce qui clochait, parce que
plus fouillis, tu meurs.

La blague, c'est que tu recomposes le contenu HTML de ton <div
id="footer"> pour chaque bouton ajouté et que, du coup, les "onclick"
des boutons précédents se retrouvent perdus dans le DOM, donc sans effet.
J'ai mis une indication dans ton source pour marquer l'endroit où ça foire.

Si tu disposes d'une console genre Firebug, essayes de mettre ça à la
fin de ta fonction d'ajout :
console.log(document.getElementById(id));
Tu devrais voir dans la console les objets correspondants aux <span> que
tu ajoutes. Si tu ajoutes plus d'un bouton et cliques sur les liens des
premiers dans la console, tu verras qu'ils sont dans le vide !
(parentNode = null)

la function ayant été modifiée pour :
#innerHTML+='<a class="button" href="javascript:void(0)"><span
id="'+id+'" onclick="'+action+';return false">'+txt+'</span></a>';



Encore plus mochouillet, mais en même temps plus cohérent.




et ça marche, pour les DEUX boutons...



Évidemment, puisque tu écris en dur le "onclick", c'est à dire sous
forme d'attribut et non de propriété.

ouais cette solution est plus propre je l'admet, par contre restyler ce
n'est pas aussi évident, ce matin j'avais essayé de créer juste un span
avec une background-image comme avec le a/span, ce n'est pas si évident,
(peut-être même pas possible avec un simple span) je regarderai un
bouton avec image...



Dommage...
Et d'ailleurs, pourquoi vouloir toujours restyler les boutons créés par
le navigateur, hein ? C'est souvent zéro en ergonomie.

Mais bon, si je fais ça, en propre je veux dire
(document.createElement("button") and co) du coup j'ai le reste à faire
comme ça, là j'ai une autre idée :
php me génère du xml en une string, je fais une transfo xslt dessus et
j'inserre par innerHTML=<résultat de la transfo xslt>
transfo côté serveur (php)



Ok, Marseille-Toulon en passant Dunkerque, pourquoi pas ?
Bon courage !

en tk, pour l'instant je n'ai pas trouvé pourquoi ça ne marche pas avec
deux boutons, je n'ai qu'un indice pour trouver, c'est le premier créé
qui a un #onclick à null...



Non, c'est tous ceux qui précèdent le dernier qui foirent.
Allez, refais-moi ça, tu vas beaucoup moins te faire ch... ! ;-)


--
Cordialement,
Pascal
Avatar
unbewusst.sein
Pascal Poncet wrote:

Eh ben voilà, les limites de ce genre de codage !
Pour tout dire, j'ai aussi cherché un moment ce qui clochait, parce que
plus fouillis, tu meurs.

La blague, c'est que tu recomposes le contenu HTML de ton <div
id="footer"> pour chaque bouton ajouté et que, du coup, les "onclick"
des boutons précédents se retrouvent perdus dans le DOM, donc sans effet.
J'ai mis une indication dans ton source pour marquer l'endroit où ça foire.

Si tu disposes d'une console genre Firebug, essayes de mettre ça à la
fin de ta fonction d'ajout :
console.log(document.getElementById(id));
Tu devrais voir dans la console les objets correspondants aux <span> que
tu ajoutes. Si tu ajoutes plus d'un bouton et cliques sur les liens des
premiers dans la console, tu verras qu'ils sont dans le vide !
(parentNode = null)




NON, je vois très bien, à la console, les DEUX boutons, par contre, oui,
je suis d'accord sur un point, c'est que, peut-être le onclick du
premier bouton disparaît quand j'ajoute le second, je ne pige pas trop
pourquoi, mais bon c'est plausible.

si à la console je fais :
bouton1=document.getElementById('id du bouton1');
je peux avoir son parent, sa classeson innerHTML etc.

par contre si je demande :
bouton1.onclick
ça me retourne : null

pour le second bouton si je demande :
bouton2.onclick ; là ça me liste la fonction attribuée à cet onclick-là.

<snip />

> ouais cette solution est plus propre je l'admet, par contre restyler ce
> n'est pas aussi évident, ce matin j'avais essayé de créer juste un span
> avec une background-image comme avec le a/span, ce n'est pas si évident,
> (peut-être même pas possible avec un simple span) je regarderai un
> bouton avec image...

Dommage...
Et d'ailleurs, pourquoi vouloir toujours restyler les boutons créés par
le navigateur, hein ? C'est souvent zéro en ergonomie.



le bouton "builtin" :
<http://cjoint.com/11au/AHCsmj3OeEH_builtin.jpg>

le bouton obtenu par css :
<http://cjoint.com/11au/AHCsnU2tlTF_by_css.jpg>

donc affirmer que c'est "zéro" en ergonomie...


> Mais bon, si je fais ça, en propre je veux dire
> (document.createElement("button") and co) du coup j'ai le reste à faire
> comme ça, là j'ai une autre idée :
> php me génère du xml en une string, je fais une transfo xslt dessus et
> j'inserre par innerHTML=<résultat de la transfo xslt>
> transfo côté serveur (php)

Ok, Marseille-Toulon en passant Dunkerque, pourquoi pas ?
Bon courage !



n'importe quoi, il faut 5 lignes de code pour faire cette transfo, c'est
autrement plus élégant qu'en créant une tripotée de nodes, j'ai déjà
fait ça, le code est illisible...

> en tk, pour l'instant je n'ai pas trouvé pourquoi ça ne marche pas avec
> deux boutons, je n'ai qu'un indice pour trouver, c'est le premier créé
> qui a un #onclick à null...

Non, c'est tous ceux qui précèdent le dernier qui foirent.



je n'en ai jamais créé comme ça plus que deux, c'est pourquoi je parle
de premier et second.

Allez, refais-moi ça, tu vas beaucoup moins te faire ch... ! ;-)



ça sera sans doute pour demain...

--
« Quand tu lances la flèche de la vérité,
trempe la pointe dans du miel. »
(Proverbe arabe)
Avatar
SAM
Le 28/08/11 09:01, Une Bévue a écrit :

la function ayant été modifiée pour :
#innerHTML+='<a class="button" href="javascript:void(0)"><span
id="'+id+'" onclick="'+action+';return false">'+txt+'</span></a>';



#innerHTML += '<a class="button" href="javascript:void(0)"><span
id="'+id+'" onclick="'+action+';return false">'+txt+'</span></a>';

avec des où ça va bien,
maybe ?

Cependant ce serait sans doute mieux :

var action = "deDroite('truc','muche,'bidule()')";

#innerHTML += '<a class="button" href="javascript:'+action+
'"><span id="'+id+'">'+txt+'</span></a>';


Et sans se farcir de paramètres à insérer au coup par coup :

var action = "maDroite(this)"; /* si on tient à ce système */

function maDroite(what) {
var d = what.parentNode;
while(d.tagName != 'div') d = d.parentNode;
d.innerHTML = '';
d.innerHTML += '<a class="button" href="javascript:'+ action +
'"><span id="' + what.id + '">' + what.text +
'</span></a>';
}


pas testé ...
et sous toutes réserves des events codés dans l'innerHTML


que pensez-vous de ce problème ?



rien

les explications et bouts de codes sont trop confus

exemple,
quel est le sens de ce charabia :

je précise qu'avec ce cha,gement, la fonction modifier marche; avant;
pas de onclick, le bouton restait inactif...



il va être temps de jeter ce clavier Canadien !
(ou d'apprendre à s'en servir)
--
Stéphane Moriaux avec/with iMac-intel
Avatar
unbewusst.sein
SAM wrote:

#innerHTML += '<a class="button" href="javascript:void(0)"><span
id="'+id+'" onclick="'+action+';return false">'+txt+'</span></a>';

avec des où ça va bien,
maybe ?



je ne pense pas, c'est bien l'insertion d'un second bouton qui pose
problème, le second marche, pas le premier.

Cependant ce serait sans doute mieux :

var action = "deDroite('truc','muche,'bidule()')";

#innerHTML += '<a class="button" href="javascript:'+action+
'"><span id="'+id+'">'+txt+'</span></a>';



ah ouais, je vois, mais bon, je cherche à supprimer la balise a sans
doute en remplaçant le couple a/span par un button...

Et sans se farcir de paramètres à insérer au coup par coup :

var action = "maDroite(this)"; /* si on tient à ce système */

function maDroite(what) {
var d = what.parentNode;
while(d.tagName != 'div') d = d.parentNode;
d.innerHTML = '';
d.innerHTML += '<a class="button" href="javascript:'+ action +
'"><span id="' + what.id + '">' + what.text +
'</span></a>';
}


pas testé ...
et sous toutes réserves des events codés dans l'innerHTML



ah ça c'est très certainement le vrai problème.



> que pensez-vous de ce problème ?

rien

les explications et bouts de codes sont trop confus

exemple,
quel est le sens de ce charabia :

> je précise qu'avec ce cha,gement, la fonction modifier marche; avant;
> pas de onclick, le bouton restait inactif...



oui; il faut devenier que la virgule "," vient à la place d'un "n"...
le reste de la phrase est juste dépendant du contexte...

il va être temps de jeter ce clavier Canadien !



je n'ai pas trouvé de clavier français de France )))
"on" m'a dit pourtant que c'est facile à trouver d'occase, je
re-re-chercherai...
(ou d'apprendre à s'en servir)



ben le problème n'est pas d'apprendre, le truc est que je ne sais pas
taper sans regarder, enfin totalement, quand je regarde le clavier je me
gourre car les yeux sont atirés vers la lettre inscrite sur le clavier.

--
« Ils ne sont grands que parce que nous sommes à genoux »
(De la Boétie)
Avatar
Pascal Poncet
Le 28/08/2011 18:29, Une Bévue a écrit :
Pascal Poncet wrote:
Et d'ailleurs, pourquoi vouloir toujours restyler les boutons créés par
le navigateur, hein ? C'est souvent zéro en ergonomie.



le bouton "builtin" :
<http://cjoint.com/11au/AHCsmj3OeEH_builtin.jpg>

le bouton obtenu par css :
<http://cjoint.com/11au/AHCsnU2tlTF_by_css.jpg>

donc affirmer que c'est "zéro" en ergonomie...



Bah, je ne voulais pas heurter ta sensibilité.
Si tu veux, on peut développer le sujet sur [f.c.i.w.auteurs], car ici
on serait hors charte (j'aurais deux liens à te donner pour argumenter
ce que j'ai osé "affirmer").

Ok, Marseille-Toulon en passant Dunkerque, pourquoi pas ?
Bon courage !



n'importe quoi, il faut 5 lignes de code pour faire cette transfo, c'est
autrement plus élégant qu'en créant une tripotée de nodes, j'ai déjà
fait ça, le code est illisible...



Oh, susceptible, ce soir !
Bon, je n'insiste pas, désolé, j'y suis peut-être allé trop fort.
Rendez service, qu'y disaient... ;-)


--
Cordialement,
Pascal
Avatar
unbewusst.sein
Pascal Poncet wrote:


Bah, je ne voulais pas heurter ta sensibilité.
Si tu veux, on peut développer le sujet sur [f.c.i.w.auteurs], car ici
on serait hors charte (j'aurais deux liens à te donner pour argumenter
ce que j'ai osé "affirmer").



l'ergonomie pour moi c'est un gros mot...
et surtout j'aime pas du tout les boutons qui changent d'allure s'ils
sont créés soit par Mac OS X; soit par win *

>> Ok, Marseille-Toulon en passant Dunkerque, pourquoi pas ?
>> Bon courage !
>
> n'importe quoi, il faut 5 lignes de code pour faire cette transfo, c'est
> autrement plus élégant qu'en créant une tripotée de nodes, j'ai déjà
> fait ça, le code est illisible...

Oh, susceptible, ce soir !
Bon, je n'insiste pas, désolé, j'y suis peut-être allé trop fort.
Rendez service, qu'y disaient... ;-)



bon; j'ai réfléchi à ça, je veux dire au innerHTML+=...
premièrement j'ai deux sources :
php qui est l'interface avec la basse de donnée, là je fais du xhr :
document.getElementById("items").innerHTML=xmlhttp.responseText;
je sais bâtir des n½uds proprement en php mais pour du xml, si je bâti
un sous-arbre en php-dom amha, je ne peux l'envoyer que comme string au
js, donc ça revient à ce que je fais avec ma dseconde source d'insertion
:
le js qui a pour fonction de gérer l'interface : modification;
suppression ajout d'un élément à la bd grosso-modo certains span passent
en input.

en js je sais aussi bâtir un sous-arbre html et l'inserrer pil-poil mais
je trouve que le code résultant est illisible, très vite complexe pour
pas grand chose.

l'erreur pour moi a été de mélanger deux manières de faire, je veux dire
faire :
#innerHTML=.".. id='"+id"'...";
et :
#onclick=machin; (dépendant de l'id tout juste créé)

en résumé; si j'étais sûr qu'un sous-arbre dom généré par du php était
directement assimilable par le browser, donc à travers le js, je
passerai tout de cette manière là.

--
« Le vrai problème avec les menteurs est que l'on ne peut jamais
être certain qu'ils ne vont pas dire la vérité. »
(Kingsley Amis)
1 2