Duplizieren von Elementen mit Hilfe von JQuery clone() | 1/2

Elemente klonen | Teil I

Als erstes muss JQuery im HEAD eingebunden werden.

<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/ jquery.min.js"></script>

Nun klonen wir das erste DIV mit der Klasse „zeile“ und setzen es an das Ende. Im zweiten Teil des Artikels wird zusätzlich die ID hochgezählt um eindeutige DIVs zu erhalten.

//die Klasse "klonen" besitzt immer nur das
//erste Element, um Verdoppeln zu verhindern
 <div id="zeile_1" class="klonen zeile">
  Zeile
 </div>

Button zum klonen erstellen:

<div id="button">+</div>

Jetzt das script für das klonen:

//Neuer Klon wird in $clone geschrieben und dann
//die Klasse ".klonen" entfernt. Nun kann sie
//an die letzte Zeile angefügt werden
//".zeile:last"
<script>
   $(document).ready(function() {
       $('#button').click(function(){
          $clone = $('.klonen').clone(true).removeClass('klonen');
          $clone.insertAfter(".zeile:last");
       }); 
   });
</script>

Wichtig: „.zeile:last„, sonst kommt es zu Verdopplungen, da nach jedem Element mit Klasse „.zeile“ ein Klon eingefügt wird.