# Elementen toevoegen

Binnen jQuery kunnen we op verschillende manieren nieuwe inhoud aan de pagina toevoegen. We kunnen zowel volledig nieuwe inhoud genereren en aan de pagina toevoegen, als reeds bestaande inhoud verplaatsen of dupliceren (*klonen*).

## Binnen de selector

Eerst gaan we na, hoe we bestaande of nieuwe inhoud binnen een element toevoegen. Twee methodes werden in voorgaande hoofdstukken reeds herhaaldelijk gebruikt.

{% hint style="success" %}
★ Open **dom/inside.html**.\
★ Bekijk de broncode en test de pagina in een browser.
{% endhint %}

```javascript
data = $('#p1').html();
$('#inside1').click(function() {
    $('#p2').html(data);
});
$('#inside2').click(function() {
    $('#p2').text(data);
});
```

Vooraan het script leest de methode `html()` de inhoud van *#p1* uit en plaatst deze in de variabele *data*. Een klik op *#inside1* kopieert de volledige inhoud, inclusief HTML-tags, van data naar *#p2*.\
De methode `text()` daarentegen kopieert enkel de tekst, zonder HTML-opmaak, naar *#p2*.

![](/files/-L9sGzqc1g-a5JEJ3ju7)

Om nieuwe inhoud binnen een element toe te voegen, kunnen we vier methodes gebruiken: twee methodes om gegevens vooraan toe te voegen en twee methodes om de inhoud achteraan toe te voegen.

`append()` en `prepend()` worden altijd voorafgegaan door een selector. Binnen de methode komt de inhoud die we respectievelijk achteraan of vooraan de selector toevoegen.

```javascript
$('#inside3').click(function() {
    $('#sect2 p.groen').append('<b> *** append *** </b>');
});
$('#inside4').click(function() {
    $('#sect2 p.groen').prepend('<b> *** prepend *** </b>');
});
```

![](/files/-L9sH-8228VVYFX16ivv)

Met `appendTo()` en `prependTo()` draaien we de logica om. Eerst komt de inhoud die we wensen toe te voegen en binnen de methode staat de selector.

```javascript
$('#inside5').click(function() {
    $('<b> *** appendTo *** </b>').appendTo('#sect3 p.groen');
});
$('#inside6').click(function() {
    $('<b> *** prependTo *** </b>').prependTo('#sect3 p.groen');
});
```

![](/files/-L9sH-Q3tGWSL8fEBfcu)

{% hint style="danger" %}
`appendTo()` en `prependTo()` volgen op het eerste zicht een vreemde logica die we binnen jQuery niet gewend zijn. Het resultaat van `append()` en `appendTo()` is in dit voorbeeld net hetzelfde. Meestal kan u dus één van beide methodes kiezen, maar in uitzonderlijke gevallen geniet `appendTo()` toch de voorkeur. Hierover dadelijk meer.
{% endhint %}

## Buiten de selector

In deze voorbeelden gaan we de nieuwe inhoud niet binnen, maar net voor of net achter de geselecteerde selector plaatsen.

{% hint style="success" %}
★ Open **dom/outside.html**.\
★ Bekijk de broncode en test de pagina in een browser.
{% endhint %}

Ook hier beschikken we weer over vier methodes: twee methodes met de selector vooraan en twee methodes met de selector binnen de methode.

`after()/insertAfter()` en `before()/insertBefore()` plaatsen de nieuwe inhoud respectievelijk achter of voor de selectie.

```javascript
$('#outside1').click(function() {
    $('#sect1 p.groen').after('<p><b>*** after ***</b></p>');
});
$('#outside2').click(function() {
    $('#sect1 p.groen').before('<p><b>*** before ***</b></p>');
});
```

![](/files/-L9sH01sCI-J4AARQw8I)

```javascript
$('#outside3').click(function() {
    $('<p><b>*** insertAfter ***</b></p>')
        .insertAfter('#sect2 p.groen');
});
$('#outside4').click(function() {
    $('<p><b>*** insertBefore ***</b></p>')
        .insertBefore('#sect2 p.groen');
});
```

![](/files/-L9sH0HdLLozkAU1ZmZJ)

## Rond de selector

Hier volgen enkele methodes waarbij we nieuwe inhoud (meestal extra tags) rond een selectie plaatsen.

{% hint style="success" %}
★ Open **dom/around.html**.\
★ Bekijk de broncode en test de pagina in een browser.
{% endhint %}

In onderstaand voorbeeld plaatst de methode `wrap()` een div-tag rond *#lijst1*. Telkens u op de knop klikt, wordt een nieuwe div-tag toegevoegd. Met `unwrap()` kan u de PARENT-tag terug verwijderen. Klik maar eens enkele keren op `unwrap()` en u zal merken dat de volledige layout verdwijnt.

```javascript
$('#around1').click(function() {
    $('#lijst1').wrap('<div class="drop-shadow"></div>');
});
$('#around2').click(function() {
    $('#lijst1').unwrap();
});
```

![](/files/-L9sH0m5cL-MXxRcgzPR)

De tweede section-tag bevat verschillende p-tags waarvan twee p-tags met de class *.groen*. De methode `wrapAll()` brengt eerst alle p-tags met class *.groen* samen en plaatst hier vervolgens in zijn geheel een div-tag rond. De methode `wrap()` zal rond elke p-tag apart een div-tag plaatsen.

```javascript
$('#around3').click(function() {
    $('#sect2 p.groen').wrapAll('<div class="drop-shadow"></div>');
});
```

![](/files/-L9sH19vw0bxJ9epF_oy)

De HTML-code wijzigt van:

```markup
...
<p class="groen">Item 1...</p>
<p>Item 2...</p>
<p class="groen">Item 3...</p>
...
```

Naar:

```markup
...
<div class="drop-shadow">
    <p class="groen">Item 1...</p>
    <p class="groen">Item 3...</p>
</div>
<p>Item 2...</p>
...
```

Waar `wrap()` een nieuwe tag rond de selectie plaatst, plaatst `wrapInner()` een nieuwe tag binnen de selectie.

```javascript
$('#around4').click(function() {
    $('#sect3 p.groen').wrapInner('<span class="drop-shadow"></span>');
});
```

![](/files/-L9sH1hzmU7yigT3ALIR)

In bovenstaand voorbeeld wijzigt de code.

* van: `<p class="groen">Item 1...</p>`
* naar: `<p class="groen"><span class="drop-shadow">Item 1...</span></p>`

## before() vs insertBefore()

We komen nog even terug op het verschil tussen `before()/insertBefore()`.

{% hint style="success" %}
★ Open **dom/before\_insertBefore.html**.\
★ Bekijk de broncode en test de pagina in een browser.
{% endhint %}

```javascript
$('#sect1 p:first').before('<img src="../assets/fotos/thumb_tulp.jpg">');
$('<img src="../assets/fotos/thumb_tulp.jpg">').insertBefore('#sect2 p:first');
```

Aan de eerste paragraaf van elke section-tag wordt een afbeelding toegevoegd. Voorlopig nog niets aan de hand. Beide methodes geven immers hetzelfde resultaat.

Stel dat we via de class *.rood* een kader rond de afbeelding plaatsen. In principe kunnen we de klasse natuurlijk rechtstreeks op de img-tag plaatsen en dan zien we ook geen verschil tussen beide methodes. Indien we de klasse echter vanuit jQuery toevoegen, dan is er wel degelijk een verschil.

{% hint style="success" %}
★ Pas de code als volgt aan:
{% endhint %}

```javascript
$('#sect1 p:first').addClass('rood').before('<img src="../assets/fotos/thumb_tulp.jpg">');
$('<img src="../assets/fotos/thumb_tulp.jpg">').addClass('rood').insertBefore('#sect2 p:first');
```

Binnen de tweede section-tag krijgt de afbeelding een rode kader, maar binnen de eerste section-tag komt het kader rond de p-tag te staan, binnen een ketting vanaf de selector. Aan de selector wordt een klasse toegevoegd en vervolgens wordt de nieuwe code toegevoegd.

De structuur van onze ketting is namelijk:

* kader op p-tag: `$(selector).addClass(...).before(nieuweCode);` &#x20;
* kader op foto: `$(nieuweCode).addClass(...).insertBefore(selector);`

![](/files/-L9sH35udjI-l3zRiy3I)

Ook `addClass()` en `before()` van plaats wisselen heeft totaal geen zin. Beide geven immers net hetzelfde resultaat.

* kader op p-tag: `$(selector).addClass(...).before(nieuweCode);`   &#x20;
* kader op p-tag: `$(selector).before(nieuweCode).addClass(...);`  &#x20;

Indien u toch met `before()` werkt, zal u de code moeten opsplitsen over twee lijnen.\
Onderstaande code geeft wel het gewenste resultaat:

```javascript
$('#sect1 p:first').before('<img src="../assets/fotos/thumb_tulp.jpg">');
$('#sect1 img:first').addClass('rood');
```

![](/files/-L9sH3mNdF1U7EDGWDMF)

Besluit:

* Wilt u enkel nieuwe inhoud toevoegen, dan kan u zowel `before()` als `insertBefore()` gebruiken.
* Indien u, VOOR het toevoegen, nog extra jQuery methodes toepast op de nieuwe inhoud, gebruik dan STEEDS `insertBefore()`.

{% hint style="info" %}
Dezelfde logica geldt natuurlijk ook voor `append()/appendTo()`, `prepend()/prependTo()`, `after()/insertAfter()`, `before()/insertBefore()` en `replaceWith()/replaceAll()`.\
De laatst genoemde methodes komen dadelijk aan bod.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://1itf.gitbook.io/jquery/8-dom-manipulatie/elementen-toevoegen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.