dupliquer un element en direct

bonsoir (re) decidemment je vous solicite beaucoup, je suis en plein aprentissage du javascript donc je galere un peu -_-

enfin bon, voila j'aurai voulu savoir si il etait possible de dupliquer un element (genre une image contenu dans une div, donc la div en fait ) en direct sur un site. Ca a l'air bizarre, mais en fait je suis en train de mettre en place une espece d'interface (assez idiote mais bon) de "création" (le mot est grand) graphique a partir d'un ensemble d'element visuel contenu dans des div.

pour l'instant j'en suis la : (on peut deplacer et changer la taille des elements) (l'aspect est un peu special mais c'est en travaux, et le son decalé c'est normal)

[ Lien ]

donc par exemple, est il possible par un moyen ou un autre avec js de selectionner une patte et de la dupliquer en direct ?

merci pour vos reponses, je m'y met de suite :D !

bon apres quelques heures dessus me voila de nouveau perdu -_-"

j'ai a peu pres compris comment fonctionne le clonenode (en appliquant et modifiant des tuto et des example, j'arrive a cloner des node et leur contenu) mais theoriquement (ou dans des fenetre d'alerte ) donc en gros je duplique pas vraiment ma div et son contenu physiquement dans la page.

la ou je bloque c'est sur le appendchild et tout ce qui doit en decouler :

en gros par exemple j'ai la div suivante (contenant une image):

<div id="patte" name="patte" onMouseOver="fnOnMouseOver('patte');" onMouseOut="fnOnMouseOver();"><img src="img/patte3.png" width="100%" height="100%" ></div>

a laquelle est associé un css :

#patte {
top: 166px;
width: 154px;
height:197px;
position: absolute;
border: 1px dashed #00FF00;
left: 220px;
}

donc en gros l'idéal c'est que je duplique la div (et son contenu), créant ainsi une div identique a la premiere, mais ayant un nouvel  ID et que en plus (ça fait beaucoup -_- ) cela crée dans le fichier css associé, une nouvelle classe pour cette nouvelle div, identique (au moment de la copie) a la classe de la div (node) parent.

cela est il possible (et a porté de main d'un novice -_- ) ?

iop , merci pour ta reponse :D !

 j'ai tenté de l'appliquer cependant je suis toujours en galere -_- (mais mon cerveau est en effervescence XD ) ça ne duplique pas mais bon, je dois pas en etre loin : voila ce que j'ai fait :

mon element a dupliquer :

<div id="divTest26" class="divTest26" onMouseOver="fnOnMouseOver('divTest26');" onMouseOut="fnOnMouseOver();" onClick="Clone_Element('divTest26');"><img src="img/patte1.png" width="100%" height="100%" ></div>

la fonction de duplication dans un js joint (copy.js) :

//--------------------------
functionClone_Element(divTest26){
  //-- Recup l'objet source
  var O_Src = document.getElementById(divTest26);
  if( O_Src){
    //-- Creation d'un clone
    var O_Clone = O_Src.cloneNode( true);
    //-- Ajout du clone
    document.appendChild( O_Clone);
  }
}

la partie style dans le css joint :

.divTest26 {
top: 525px;
width: 110px;
height: 80px;
position: absolute;
border: 1px dashed #000000;
left: 642px;
}

et les appel du js et du css (qui sont bons a priori mais bon)

<script type="text/javascript" src="./js/copy.js"></script>

<link rel="stylesheet" href="divresize.css">

la seule chose a la quelle je pense qu'il pourrait manquer, ce serai une commande

body onLoad="clone_element()"; 

sinon, je vois pas trop, je nage un peu a vrai dire -_-, sinon j'ai aussi pensé au fait que rien ne precise au script de créer une nouvelle id pour le nouvel element (fruit de la duplication), mais le probleme c'est que je ne sais absolument pas comment ordonner de creer un nouvel id .

Puis-je soliciter une nouvelle fois votre aide s'il vous plait (en esperant ne pas trop vous embeter ^^ ) ?

trop bien ça marche !! grand merci ^^ !!

donc en gros ce qu'il manquait c'etait juste le O_Clone.style.top="100px"; ?

sinonpar contre il reste toujours un petit souci(promis apres j'arrete :3 ) comme on peut le voir maintenant sur ma page (j'ai fait une maj avec ce code corrigé ^^ [ Lien ] ), en double cliquant sur la patte en bas a gauche du "tas" d'image ( celle qui pointe vers le bas ) ça creer donc une autre patte plus haut, mais cette nouvelle patte n'est pas manipulable, ou plus exactement (et finalement ce qui est assez logique) lorsque je tente de la manipuler, en fait cela modifie la patte "parent", car la nouvelle doit avoir la meme ID que la "parent".

Est-il possible d'ordonner la création d'une patte "child" ayant une nouvelle ID (du coup, appartenant a la meme classe, elle aura les meme proportion de base, mais sera manipulable independamment de la "parent", enfin si je ne me trompe pas, cela dit, parallélement a ça, je me dis aussi que si elle a une nouvelle ID, ce nouvel element devra aussi heriter des comportement

onMouseOver="fnOnMouseOver(this);" onMouseOut="fnOnMouseOver();" onClick="Clone_Element(this)

de son element parent, cela se fait il automatiquement lors de la duplication ?

>>donc en gros ce qu'il manquait c'etait juste le O_Clone.style.top="100px"; ?
non,non. ça c'est pour le voir, sinon ça recouvre l'ancien
mais document.body ( en gras ) là, mon foie....
>>lorsque je tente de la manipuler, en fait cela modifie la patte "parent", car la nouvelle doit avoir la meme ID
comme l'avait signalé petoleteam
alors... change le !    O_Clone.id="ce_que_tu_veux_ou_presque";   
                              tu sauras bien créer/calculer un id spécifique que tu puisses retrouver

Bul [mon Site] [M'écrire]