cloneNode et id

Sébastien

09/12/2004 à 22:54

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

C'est vrai que cela risque de poser problème.
Tu peux mettre à jour l'ID avec setAttribute( ).

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire
// à moins de changer d'id ?
}

Oui change l'ID.

{
var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

J'avais testé il y a longtemps, longtemps, ...
Si mes souvenirs sont bons, à l'époque, sous Moz, c'est le 1er noeud
rencontré de l'ID spécifié qui ést retourné. Sous IE on a le droit à un
tableau d'éléments ayant tous le même ID.
Conclusion : met à jour l'identifiant.

YD

10/12/2004 à 00:17

Je repasse de temps en temps poser des questions pour l'appli en
JavaScript dont je nettoie le code en l'améliorant. J'avais déjà
demandé comment faire pour ajouter des éléments de façon dynamique,
et on m'avait répondu « cloneNode() ».

Ce que je voudrais savoir, c'est comment la fonction se comporte sur un
n½ud (ou des sous-n½uds) avec un attribut id.[...]

Il est copié avec tous ses attributs mais n'est pas inséré dans le document.
Sa propriété parentNode est null. Donc pas de conflit d'id. Le seul moyen de
le manipuler, c'est la référence qu'on en a (la variable donc).

Pour clarifier ma pensée, voici un petit bout de code parsemé de
questions sous forme de commentaires.

{
var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// div_de_reference contient des boutons, des checkboxes, etc.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

Tout à fait licite. Mais si tu veux copier le n½ud et ses sous-n½uds, il faut
écrire : ref_div.cloneNode(true). Il me semble qu'IE copie systématiquement le
sous-arbre dans tous les cas (je n'ai pas le temps de vérifier). Ce n'est pas
le cas des navigateurs conformes DOM2, qui ne copient que le n½ud spécifié et
ses attributs éventuels, mais pas les n½uds qu'il contient, y compris le texte.

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire
// à moins de changer d'id ?
}

Exact. Il faut modifier l'id. Personnellement, j'effectue toutes les
transformations *avant* l'insertion dans le document.

....
// là il se passe plein de choses, en particulier je modifie le contenu
// de new_div, puis je retourne dans la fonction ci-dessus
....

{
var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Le clone est une copie du n½ud, pas une référence vers le n½ud initial qui
n'est donc pas affecté par les modifications sur le clone. Cela étant, s'il
y a plusieurs appels à la fonction, le mieux ne serait-il pas de définir le
n½ud à cloner en variable globale ? Plus de problème, ref_div référencera
toujours le même élément et pas besoin du coûteux getElementById à chaque
appel (même remarque pour le fieldset).

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

Et même réponse, manipule-le avant l'insertion. Ça évitera au navigateur de
redessiner éventuellement plusieurs fois les contrôles...

}

--
Y.D.

Je repasse de temps en temps poser des questions pour l'appli en
JavaScript dont je nettoie le code en l'améliorant. J'avais déjà
demandé comment faire pour ajouter des éléments de façon dynamique,
et on m'avait répondu « cloneNode() ».

Ce que je voudrais savoir, c'est comment la fonction se comporte sur un
n½ud (ou des sous-n½uds) avec un attribut id.[...]

Il est copié avec tous ses attributs mais n'est pas inséré dans le document.
Sa propriété parentNode est null. Donc pas de conflit d'id. Le seul moyen de
le manipuler, c'est la référence qu'on en a (la variable donc).

Pour clarifier ma pensée, voici un petit bout de code parsemé de
questions sous forme de commentaires.

{
var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// div_de_reference contient des boutons, des checkboxes, etc.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

Tout à fait licite. Mais si tu veux copier le n½ud et ses sous-n½uds, il faut
écrire : ref_div.cloneNode(true). Il me semble qu'IE copie systématiquement le
sous-arbre dans tous les cas (je n'ai pas le temps de vérifier). Ce n'est pas
le cas des navigateurs conformes DOM2, qui ne copient que le n½ud spécifié et
ses attributs éventuels, mais pas les n½uds qu'il contient, y compris le texte.

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire
// à moins de changer d'id ?
}

Exact. Il faut modifier l'id. Personnellement, j'effectue toutes les
transformations *avant* l'insertion dans le document.

....
// là il se passe plein de choses, en particulier je modifie le contenu
// de new_div, puis je retourne dans la fonction ci-dessus
....

{
var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Le clone est une copie du n½ud, pas une référence vers le n½ud initial qui
n'est donc pas affecté par les modifications sur le clone. Cela étant, s'il
y a plusieurs appels à la fonction, le mieux ne serait-il pas de définir le
n½ud à cloner en variable globale ? Plus de problème, ref_div référencera
toujours le même élément et pas besoin du coûteux getElementById à chaque
appel (même remarque pour le fieldset).

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

Et même réponse, manipule-le avant l'insertion. Ça évitera au navigateur de
redessiner éventuellement plusieurs fois les contrôles...

}

--
Y.D.

Vous avez filtré cet utilisateur ! Consultez son message

Je repasse de temps en temps poser des questions pour l'appli en
JavaScript dont je nettoie le code en l'améliorant. J'avais déjà
demandé comment faire pour ajouter des éléments de façon dynamique,
et on m'avait répondu « cloneNode() ».

Ce que je voudrais savoir, c'est comment la fonction se comporte sur un
n½ud (ou des sous-n½uds) avec un attribut id.[...]

Il est copié avec tous ses attributs mais n'est pas inséré dans le document.
Sa propriété parentNode est null. Donc pas de conflit d'id. Le seul moyen de
le manipuler, c'est la référence qu'on en a (la variable donc).

Pour clarifier ma pensée, voici un petit bout de code parsemé de
questions sous forme de commentaires.

{
var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// div_de_reference contient des boutons, des checkboxes, etc.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

Tout à fait licite. Mais si tu veux copier le n½ud et ses sous-n½uds, il faut
écrire : ref_div.cloneNode(true). Il me semble qu'IE copie systématiquement le
sous-arbre dans tous les cas (je n'ai pas le temps de vérifier). Ce n'est pas
le cas des navigateurs conformes DOM2, qui ne copient que le n½ud spécifié et
ses attributs éventuels, mais pas les n½uds qu'il contient, y compris le texte.

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire
// à moins de changer d'id ?
}

Exact. Il faut modifier l'id. Personnellement, j'effectue toutes les
transformations *avant* l'insertion dans le document.

....
// là il se passe plein de choses, en particulier je modifie le contenu
// de new_div, puis je retourne dans la fonction ci-dessus
....

{
var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Le clone est une copie du n½ud, pas une référence vers le n½ud initial qui
n'est donc pas affecté par les modifications sur le clone. Cela étant, s'il
y a plusieurs appels à la fonction, le mieux ne serait-il pas de définir le
n½ud à cloner en variable globale ? Plus de problème, ref_div référencera
toujours le même élément et pas besoin du coûteux getElementById à chaque
appel (même remarque pour le fieldset).

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

Et même réponse, manipule-le avant l'insertion. Ça évitera au navigateur de
redessiner éventuellement plusieurs fois les contrôles...

}

--
Y.D.

YD

10/12/2004 à 00:18

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

C'est vrai que cela risque de poser problème.
Tu peux mettre à jour l'ID avec setAttribute( ).

Pourquoi avec setAttribute ? On travaille -- de toute évidence --
sur un document HTML ou XHTML, on peut donc utiliser l'attribut id
et écrire :
new_div.id = idString

--
Y.D.

ASM

10/12/2004 à 00:34

Bonjour,

Je repasse de temps en temps poser des questions pour l'appli en
JavaScript dont je nettoie le code en l'améliorant. J'avais déjà
demandé comment faire pour ajouter des éléments de façon dynamique,
et on m'avait répondu « cloneNode() ».

Et "on" avai(en)t ensuite tenté d'expliquer
(et, à mon idée, c'est pas trop fastoche).

Le principe (pour les navigateurs bienséants)
- on cloneNode le div
- en même temps (ou presque) on lui change l'id et ses attributs si nécessaires
- en même temps (ou presque) on change les ids de ses enfants en possédant
- enfin on range le clone à la bonne place

Le principe (pour l'autre navigateur)
- on cloneNode le div
- on range le clone à la bonne place
puis (comme on sait où il est)
- on lui change l'id et ses attributs si nécessaires
- on change les ids de ses enfants en possédant
- on le triture à volonté (contenus, styles, etc)
(mais à quoi bon passer par un clonage
si c'est pour avoir qque chose de complètement diférent?)

var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// div_de_reference contient des boutons, des checkboxes, etc.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

oui, pas bien d'autres possibilités de faire autrement
(un clone est une duplication à l'identique non?)

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire

Oui tu n'as pas le droit mais tu dois passer outre car
, et si j'ai bien compris,
c'est bien ce que IE t'oblige à faire (même si c'est un non sens)

// à moins de changer d'id ?

En effet : à faire derechef aussitot après placement (cf plus bas)
en outre ce sera ainsi plus facile de l'attraper pour le modifier si nécessaire.

// là il se passe plein de choses, en particulier je modifie le contenu

Alors tu aurais eu aussi vite fait de creater un Element tout de go ?

var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Ben si tu n'en as pas modifié l'id
il faut alors que tu le saisisses par le firstChild du truc de placement
(ou lastChild selon comme tu l'as placé) ou childNodes[numero d'index]
ou le rang où il est placé
exemple :
document.getElementById("un_fieldset").getElementsByTagName('div')[n]
et en profiter pour lui filer un id pour y faire référence + facilement.

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

à mon idée on peut appender autant d'enfants qu'on veut ... ;-)
(chaque nouveau gosse se calant à la queue de la ribambelle)

}

As-tu esayé ?
que nous dit :
http://www.toutenligne.com/documentation/html/javascript/objets/node.htm#append_child ?

"Ajoute un nud nouvellement créé auparavant à la structure de nuds existante,
et cela de façon à ce qu'il soit inséré comme dernier nud enfant
d'un nud à mentionner"

soit placer un dernier enfant dans "fieldset" :
fieldset.appendChild(new_div);
ce qui nous permet par exemple de faire aussitôt et derechef :
var E = fieldset.getElementsByTagName('div');
var i = E.length;
with(E[i]) {
id = 'tartempion'+i;
style.backgroundColor = 'red';
style.visibility = 'visible';
}

Bien lire les "Attention" de la page ci-dessus
relatifs aux particularismes des diférents IE !

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Bonjour,

Je repasse de temps en temps poser des questions pour l'appli en
JavaScript dont je nettoie le code en l'améliorant. J'avais déjà
demandé comment faire pour ajouter des éléments de façon dynamique,
et on m'avait répondu « cloneNode() ».

Et "on" avai(en)t ensuite tenté d'expliquer
(et, à mon idée, c'est pas trop fastoche).

Le principe (pour les navigateurs bienséants)
- on cloneNode le div
- en même temps (ou presque) on lui change l'id et ses attributs si nécessaires
- en même temps (ou presque) on change les ids de ses enfants en possédant
- enfin on range le clone à la bonne place

Le principe (pour l'autre navigateur)
- on cloneNode le div
- on range le clone à la bonne place
puis (comme on sait où il est)
- on lui change l'id et ses attributs si nécessaires
- on change les ids de ses enfants en possédant
- on le triture à volonté (contenus, styles, etc)
(mais à quoi bon passer par un clonage
si c'est pour avoir qque chose de complètement diférent?)

var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// div_de_reference contient des boutons, des checkboxes, etc.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

oui, pas bien d'autres possibilités de faire autrement
(un clone est une duplication à l'identique non?)

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire

Oui tu n'as pas le droit mais tu dois passer outre car
, et si j'ai bien compris,
c'est bien ce que IE t'oblige à faire (même si c'est un non sens)

// à moins de changer d'id ?

En effet : à faire derechef aussitot après placement (cf plus bas)
en outre ce sera ainsi plus facile de l'attraper pour le modifier si nécessaire.

// là il se passe plein de choses, en particulier je modifie le contenu

Alors tu aurais eu aussi vite fait de creater un Element tout de go ?

var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Ben si tu n'en as pas modifié l'id
il faut alors que tu le saisisses par le firstChild du truc de placement
(ou lastChild selon comme tu l'as placé) ou childNodes[numero d'index]
ou le rang où il est placé
exemple :
document.getElementById("un_fieldset").getElementsByTagName('div')[n]
et en profiter pour lui filer un id pour y faire référence + facilement.

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

à mon idée on peut appender autant d'enfants qu'on veut ... ;-)
(chaque nouveau gosse se calant à la queue de la ribambelle)

}

As-tu esayé ?
que nous dit :
http://www.toutenligne.com/documentation/html/javascript/objets/node.htm#append_child ?

"Ajoute un nud nouvellement créé auparavant à la structure de nuds existante,
et cela de façon à ce qu'il soit inséré comme dernier nud enfant
d'un nud à mentionner"

soit placer un dernier enfant dans "fieldset" :
fieldset.appendChild(new_div);
ce qui nous permet par exemple de faire aussitôt et derechef :
var E = fieldset.getElementsByTagName('div');
var i = E.length;
with(E[i]) {
id = 'tartempion'+i;
style.backgroundColor = 'red';
style.visibility = 'visible';
}

Bien lire les "Attention" de la page ci-dessus
relatifs aux particularismes des diférents IE !

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Vous avez filtré cet utilisateur ! Consultez son message

Bonjour,

Je repasse de temps en temps poser des questions pour l'appli en
JavaScript dont je nettoie le code en l'améliorant. J'avais déjà
demandé comment faire pour ajouter des éléments de façon dynamique,
et on m'avait répondu « cloneNode() ».

Et "on" avai(en)t ensuite tenté d'expliquer
(et, à mon idée, c'est pas trop fastoche).

Le principe (pour les navigateurs bienséants)
- on cloneNode le div
- en même temps (ou presque) on lui change l'id et ses attributs si nécessaires
- en même temps (ou presque) on change les ids de ses enfants en possédant
- enfin on range le clone à la bonne place

Le principe (pour l'autre navigateur)
- on cloneNode le div
- on range le clone à la bonne place
puis (comme on sait où il est)
- on lui change l'id et ses attributs si nécessaires
- on change les ids de ses enfants en possédant
- on le triture à volonté (contenus, styles, etc)
(mais à quoi bon passer par un clonage
si c'est pour avoir qque chose de complètement diférent?)

var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// div_de_reference contient des boutons, des checkboxes, etc.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

oui, pas bien d'autres possibilités de faire autrement
(un clone est une duplication à l'identique non?)

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire

Oui tu n'as pas le droit mais tu dois passer outre car
, et si j'ai bien compris,
c'est bien ce que IE t'oblige à faire (même si c'est un non sens)

// à moins de changer d'id ?

En effet : à faire derechef aussitot après placement (cf plus bas)
en outre ce sera ainsi plus facile de l'attraper pour le modifier si nécessaire.

// là il se passe plein de choses, en particulier je modifie le contenu

Alors tu aurais eu aussi vite fait de creater un Element tout de go ?

var fieldset = document.getElementById("un_fieldset");

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Ben si tu n'en as pas modifié l'id
il faut alors que tu le saisisses par le firstChild du truc de placement
(ou lastChild selon comme tu l'as placé) ou childNodes[numero d'index]
ou le rang où il est placé
exemple :
document.getElementById("un_fieldset").getElementsByTagName('div')[n]
et en profiter pour lui filer un id pour y faire référence + facilement.

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

à mon idée on peut appender autant d'enfants qu'on veut ... ;-)
(chaque nouveau gosse se calant à la queue de la ribambelle)

}

As-tu esayé ?
que nous dit :
http://www.toutenligne.com/documentation/html/javascript/objets/node.htm#append_child ?

"Ajoute un nud nouvellement créé auparavant à la structure de nuds existante,
et cela de façon à ce qu'il soit inséré comme dernier nud enfant
d'un nud à mentionner"

soit placer un dernier enfant dans "fieldset" :
fieldset.appendChild(new_div);
ce qui nous permet par exemple de faire aussitôt et derechef :
var E = fieldset.getElementsByTagName('div');
var i = E.length;
with(E[i]) {
id = 'tartempion'+i;
style.backgroundColor = 'red';
style.visibility = 'visible';
}

Bien lire les "Attention" de la page ci-dessus
relatifs aux particularismes des diférents IE !

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

ASM

10/12/2004 à 00:41

Exact. Il faut modifier l'id. Personnellement, j'effectue toutes les
transformations *avant* l'insertion dans le document.

Perso : mon IE est incapable de comprendre ça !
(à tel point que j'utilisais 2 codes
dont 1 "à l'ancienne" pour IE et activé après insertion)

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

ASM

10/12/2004 à 00:44

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

C'est vrai que cela risque de poser problème.
Tu peux mettre à jour l'ID avec setAttribute( ).

Pourquoi avec setAttribute ? On travaille -- de toute évidence --
sur un document HTML ou XHTML, on peut donc utiliser l'attribut id
et écrire :
new_div.id = idString

Ha! Ouf ! je croyais dire des bêtises par ailleurs.

Mais ... les 2 sont possibles ?

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Olivier Miakinen

10/12/2004 à 00:47

Il est copié avec tous ses attributs mais n'est pas inséré dans le document.
Sa propriété parentNode est null. Donc pas de conflit d'id. [...]

C'est noté.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

Tout à fait licite. Mais si tu veux copier le n½ud et ses sous-n½uds, il faut
écrire : ref_div.cloneNode(true).

Oui. Il fallait bien que je me trompe au moins une fois en rédigeant mon
article. Dans le vrai code JavaScript j'ai bien mis "true".

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire
// à moins de changer d'id ?

Exact. Il faut modifier l'id. Personnellement, j'effectue toutes les
transformations *avant* l'insertion dans le document.

Eh bien c'est donc ce que je vais faire.

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Le clone est une copie du n½ud, pas une référence vers le n½ud initial qui
n'est donc pas affecté par les modifications sur le clone.

Nous sommes d'accord. Ma question était plutôt de savoir, s'il y a deux
éléments avec le même id, lequel sera récupéré par un getElementById.
Mais comme je vais changer l'id avant l'insertion la question ne se
posera pas, en fait.

Cela étant, s'il y a plusieurs appels à la fonction, le mieux ne
serait-il pas de définir le n½ud à cloner en variable globale ? Plus
de problème, ref_div référencera toujours le même élément et pas
besoin du coûteux getElementById à chaque appel (même remarque pour
le fieldset).

J'ai instinctivement tendance à me méfier des variables globales, même
quand je ne le devrais pas. Après réflexion, je crois que je vais suivre
ton conseil (pas pour le fieldset, en revanche, car lui changera d'un
appel à l'autre).

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

Et même réponse, manipule-le avant l'insertion. Ça évitera au navigateur de
redessiner éventuellement plusieurs fois les contrôles...

... sauf que parfois cela ne marche pas sous IE, par exemple pour
l'histoire de l'attribut "checked" dans une checkbox...

Il est copié avec tous ses attributs mais n'est pas inséré dans le document.
Sa propriété parentNode est null. Donc pas de conflit d'id. [...]

C'est noté.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

Tout à fait licite. Mais si tu veux copier le n½ud et ses sous-n½uds, il faut
écrire : ref_div.cloneNode(true).

Oui. Il fallait bien que je me trompe au moins une fois en rédigeant mon
article. Dans le vrai code JavaScript j'ai bien mis "true".

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire
// à moins de changer d'id ?

Exact. Il faut modifier l'id. Personnellement, j'effectue toutes les
transformations *avant* l'insertion dans le document.

Eh bien c'est donc ce que je vais faire.

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Le clone est une copie du n½ud, pas une référence vers le n½ud initial qui
n'est donc pas affecté par les modifications sur le clone.

Nous sommes d'accord. Ma question était plutôt de savoir, s'il y a deux
éléments avec le même id, lequel sera récupéré par un getElementById.
Mais comme je vais changer l'id avant l'insertion la question ne se
posera pas, en fait.

Cela étant, s'il y a plusieurs appels à la fonction, le mieux ne
serait-il pas de définir le n½ud à cloner en variable globale ? Plus
de problème, ref_div référencera toujours le même élément et pas
besoin du coûteux getElementById à chaque appel (même remarque pour
le fieldset).

J'ai instinctivement tendance à me méfier des variables globales, même
quand je ne le devrais pas. Après réflexion, je crois que je vais suivre
ton conseil (pas pour le fieldset, en revanche, car lui changera d'un
appel à l'autre).

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

Et même réponse, manipule-le avant l'insertion. Ça évitera au navigateur de
redessiner éventuellement plusieurs fois les contrôles...

... sauf que parfois cela ne marche pas sous IE, par exemple pour
l'histoire de l'attribut "checked" dans une checkbox...

Vous avez filtré cet utilisateur ! Consultez son message

Il est copié avec tous ses attributs mais n'est pas inséré dans le document.
Sa propriété parentNode est null. Donc pas de conflit d'id. [...]

C'est noté.

var new_div = ref_div.cloneNode();
// ai-je le droit de faire ça, sachant que cela duplique l'id,
// en l'occurrence "div_de_reference" ?

Tout à fait licite. Mais si tu veux copier le n½ud et ses sous-n½uds, il faut
écrire : ref_div.cloneNode(true).

Oui. Il fallait bien que je me trompe au moins une fois en rédigeant mon
article. Dans le vrai code JavaScript j'ai bien mis "true".

fieldset.appendChild(new_div);
// c'est peut-être ça que je n'ai pas le droit de faire
// à moins de changer d'id ?

Exact. Il faut modifier l'id. Personnellement, j'effectue toutes les
transformations *avant* l'insertion dans le document.

Eh bien c'est donc ce que je vais faire.

var ref_div = document.getElementById("div_de_reference");
// lequel vais-je récupérer ? celui de base ? ou son clone qui,
// je le rappelle, a vu son contenu modifié après clonage ?

Le clone est une copie du n½ud, pas une référence vers le n½ud initial qui
n'est donc pas affecté par les modifications sur le clone.

Nous sommes d'accord. Ma question était plutôt de savoir, s'il y a deux
éléments avec le même id, lequel sera récupéré par un getElementById.
Mais comme je vais changer l'id avant l'insertion la question ne se
posera pas, en fait.

Cela étant, s'il y a plusieurs appels à la fonction, le mieux ne
serait-il pas de définir le n½ud à cloner en variable globale ? Plus
de problème, ref_div référencera toujours le même élément et pas
besoin du coûteux getElementById à chaque appel (même remarque pour
le fieldset).

J'ai instinctivement tendance à me méfier des variables globales, même
quand je ne le devrais pas. Après réflexion, je crois que je vais suivre
ton conseil (pas pour le fieldset, en revanche, car lui changera d'un
appel à l'autre).

var new_div = ref_div.cloneNode();
fieldset.appendChild(new_div);
// mêmes questions que précédemment : ai-je le droit de faire ça ?

Et même réponse, manipule-le avant l'insertion. Ça évitera au navigateur de
redessiner éventuellement plusieurs fois les contrôles...

... sauf que parfois cela ne marche pas sous IE, par exemple pour
l'histoire de l'attribut "checked" dans une checkbox...

Olivier Miakinen

10/12/2004 à 00:50

Tu peux mettre à jour l'ID avec setAttribute( ).

Pourquoi avec setAttribute ? On travaille -- de toute évidence --
sur un document HTML ou XHTML, on peut donc utiliser l'attribut id
et écrire :
new_div.id = idString

Tu veux bien détailler dans quels cas on est obligés d'utiliser
setAttribute et dans quels cas on peut s'en dispenser ? J'aimerais bien
acquérir les bonnes pratiques dès le départ, autant qu'il m'est possible
de le faire.

Olivier Miakinen

10/12/2004 à 00:57

Le principe (pour les navigateurs bienséants)
- on cloneNode le div
- en même temps (ou presque) on lui change l'id et ses attributs si nécessaires
- en même temps (ou presque) on change les ids de ses enfants en possédant
- enfin on range le clone à la bonne place

Le principe (pour l'autre navigateur)
- on cloneNode le div
- on range le clone à la bonne place
puis (comme on sait où il est)
- on lui change l'id et ses attributs si nécessaires
- on change les ids de ses enfants en possédant
- on le triture à volonté (contenus, styles, etc)

Hum... si je pouvais éviter de trop me prostituer pour IE... pardon...
pour « l'autre », je préfèrerais !

(mais à quoi bon passer par un clonage
si c'est pour avoir qque chose de complètement diférent?)

C'était pour l'exemple. En fait j'ai beaucoup de choses identiques et
peu de différences.

As-tu esayé ?
que nous dit :
http://www.toutenligne.com/documentation/html/javascript/objets/node.htm#append_child ?

C'est déjà toi qui m'avais donné un lien de ce style, je crois.
J'obtiens :

http://www.nexenservices.com/404.php#append_child
Le fichier ou la page demandé n'existe pas

Bien lire les "Attention" de la page ci-dessus
relatifs aux particularismes des diférents IE !

J'aimerais bien...

ASM

10/12/2004 à 01:12

C'est déjà toi qui m'avais donné un lien de ce style, je crois.

alors essayer :
http://fr.selfhtml.org/javascript/objets/node.htm

Bien lire les "Attention" de la page ci-dessus
relatifs aux particularismes des diférents IE !

J'aimerais bien...

Je crois que là ça va être plus facile ;-))

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

cloneNode et id

10 réponses

Veuillez sélectionner un problème