Discussion :

[Difré91]

Bonjour à tous,

Je dois pour mon site offir la possibilité de cloner des éléments HTML potentiellement occupés par d'autres.

Il faut aussi que je change tous les identifiants (rajouter un suffixe je pense) et que je conserve les valeurs de tous les inputs.

J'ai déjà des idées pour faire une telle fonction, mais je me demandais :

- existe t-il déjà une telle fonction (dans un framework ou non) ?
- sinon je cherche les meilleurs manière de réaliser ça.

Je vais vous exposer ce que je compte faire pour voir si c'est réalisable et optimal.

Je pensais faire ça en récursif :
- choisr l'élément à cloner, le cloner, et après relancer la fonction récursivement sur tous ses fils que l'on ajoute au nouvel élément cloné.
- retourner l'élement cloné

Premier problème, comment gérer le texte entre les différents noeud fils ?

Et une autre question me vient à l'esprit, je pensais rajouter cette méthode en prototype aux éléments HTML de javascript (si cette fonction n'existe pas encore une fois).
Existe t'il une telle classe en javascript qui désigne n'importe quel élément HTML ?

Merci d'avance

[E.Bzz]

Bonjour,
à priori, cloneNode() devrait répondre à tes attentes

A+

[Difré91]

Bon, je savais que j'allais oublier des détails dans mon premier message.

Déjà merci pour la fonction E.Bzz, je vais surement m'en servir.

Mais je voudrais spécifier un suffixe qui se rajouterais à chaque id d'élements si les éléments en sont pourvus.

Parce qu'avec du JS, les identifiant sont assez important et faire une simple copie duplique aussi les id qui ne sont du coup plus uniques.

A mois encore qu'une telle fonction existe (et encore, il me faudrait aussi dupliquer du JS et le réévaluer, je doute fort qu'une telle fonction existe !), je pense devoir me recréer ma propre fonction.

Du coup, je cherche encore l'élement javascript qui désigne les éléments HTML (en gros la classe qui possède la méthode cloneNode() ).

Merci d'avance

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var nouvel_element = old_element.cloneNode(true);
nouvel_element.id = nouvel_id;

[Difré91]

Oui dans l'idée c'est ça, mais ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="conteneur">
  <div id="premier_fils">Toto</div>
  <div id="deuxieme_fils">Tutu</div>
  <div id="troisieme_fils">Titi</div>
</div>

ça va marcher là ?

Donc je pense utiliser le cloneNode en mode false (non profond). Et pour chaque noeud fils, si le noeud possède un id, lui rajouter le suffixe.

Mais en fait, je ne demande pas forcément que l'on me fasse la fonction (encore que ce serais vachement sympa ^^).
Je veux juste avoir des infos pour la suite qui vont me manquer, à savoir à quelle classe JS ajouter la fonction pour que la récursion marche bien.

Et de toute façon ma fonction va être plus complexe qu'un simple copier coller de HTML. J'aurais aussi du javascript à réévaluer, javascript modifié car les id seront modifiés aussi.

Enfin, y'a quand même un peu de reflexion derrière et je pourrais pas me contenter des fonctions préexistente (je pense en tout cas).

[SpaceFrog]

le clonage sera effectif mais le DOM sera perdu au niveau de la duplication des id si tu fais un cloneNode en profondeur car les sous id seront dupliqué.

Si tu ne peux pas ensuite renommer les childNodes du conteneur, on peut imaginer une fonction qui fasse la mêem chose que cloneNode mais en modifiant les id (incréments ?) au moyen d'une boucle for et d'un test sur l'id ...