Comment copier un div entier vers un autre div lorsque javascript est déclenché dans le div

Question

J'ai deux colonnes. Les gens doivent sélectionner des éléments de la première colonne et ils seront ajoutés à la deuxième colonne.

Je peux utiliser innerHTML mais je ne sais jamais combien d'éléments il va y avoir. Donc, quand je clique sur le lien 'MOVE', je devrais connaître l'ID de l'élément (dans l'exemple element1, element2 ou element3). Est-ce que quelqu'un sait comment je reçois le parent de la division parent où le javascript a déclenché?

Comme ceci:

<div id="column1"> 
    <div id="element1">random tekst 1 
     <div id="right"> 
      <a href="#" onclick="copy()">MOVE</a> 
     </div> 
    </div> 
    <div id="element2">random tekst 2 
     <div id="right"> 
      <a href="#" onclick="copy()">MOVE</a> 
     </div> 
    </div> 
    <div id="element3">random tekst 3 
     <div id="right"> 
      <a href="#" onclick="copy()">MOVE</a> 
     </div> 
    </div> 
</div> 

<div id="column2"> 

</div> 

Answer 1

Vous pouvez passer une référence de l'élément d'ancrage à la copie de la fonction et utiliser parentNode attribut pour obtenir le parent immédiat.

<a href="#" onclick="copy(this)">MOVE</a> 

function copy(elem) 
{ 
    alert(elem.parentNode.parentNode) 
} 

Voir parentNode

Votre fonction complète de copie sera

function copy(elem) 
    { 
     var target = document.getElementById ("column2"); 
     target.appendChild (elem.parentNode.parentNode); 
    } 

Working Demo

Remarque

En outre, il existe un problème avec votre code HTML. Vous avez plusieurs éléments avec le même identifiant. Ce n'est pas valide. Vous avez plusieurs éléments div avec le même identifiant "right". Changez-les en id uniques.