> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/8-dom-manipulatie/elementen-klonen.md).
# Elementen klonen
Stel dat we vanuit AJAX een aantal tweets inlezen en deze op onze pagina integreren. Elke tweet krijgt een gelijkaardige lay-out. Dit kunnen we perfect met de methodes die we in dit hoofdstuk hebben besproken. Echter de code die we moeten toevoegen is nogal uitgebreid. Waarschijnlijk gebruiken we een section-tag met daarin een hx-tag, een p-tag en nog een link. Stel dat we dit voor x tweets moeten herhalen. U merkt het al. Dit is een zeer omslachtige en tijdrovende bezigheid.
Voor dit soort toepassingen gebruiken we dus beter een sjabloon dat reeds de volledige structuur en lay-out bevat. Dit sjabloon gaan we dan met de methode `clone()` x maal kopiëren en plakken (klonen). Daarna hoeven we enkel nog de inhoud aan te passen en de toepassing is klaar.
{% hint style="success" %}
★ Open **dom/clone.html**.\
★ Bekijk de broncode en test de pagina in een browser.
{% endhint %}
Zodra u de pagina in een browser opent, verschijnt de tijd in de span-tag binnen de lijst. Klik op het listitem en de tijd verschijnt in een alertbox.
```markup
...
```
{% hint style="success" %}
★ Klik enkele keren op de knop **nieuwe tijd**.
{% endhint %}
```javascript
$('#clone').click(function() {
uur = tijd();
$('main li.temp').clone().removeClass('temp').insertBefore('main li:first');
});
```
Het listitem met class *.temp* wordt gekloond. Vervolgens wordt in het gekloonde item de class *.temp* verwijderd. De nieuwe code wordt vooraan de lijst toegevoegd.
Telkens u op de knop klikt, verschijnt er een perfecte kopie van het laatste item uit de lijst. We klonen voorlopig enkel de li-tag. Klik maar eens op een gegenereerd item. De alertbox verschijnt enkel bij het laatste item, niet op de gekloonde items.
{% hint style="success" %}
★ Pas de code als volgt aan en test het resultaat in een browser:
{% endhint %}
```javascript
$('#clone').click(function() {
uur = tijd();
$('main li.temp').clone(true).removeClass('temp').insertBefore('main li:first');
});
```
Met de parameter `true` gaat u zowel de li-tag als het gekoppelde event dupliceren. Vanaf nu verschijnt bij elk item een alertbox.
Als laatste gaan we niet enkel het item met zijn event handlers klonen, maar we gaan eveneens de datum opnieuw berekenen.
{% hint style="success" %}
★ Pas de code als volgt aan en test het resultaat in een browser:
{% endhint %}
```javascript
$('#clone').click(function() {
uur = tijd();
$('main li.temp').clone(true).removeClass('temp').find('.tijd').text(uur).end().insertBefore('main li:first');
});
```
Voor we de gekloonde gegevens toevoegen, gaan we binnen de selectie op zoek naar *span.tijd* en passen de inhoud aan. De variabele *uur* verwijst naar de functie `tijd()`. Daarna keren we via `end()` terug naar de eerste selectie (*li.temp*) en voegen nu pas de nieuwe code vooraan de lijst toe. Ziehier het resultaat:
