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.

★ Open dom/inside.html. ★ Bekijk de broncode en test de pagina in een browser.

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.

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.

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

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.

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

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.

Buiten de selector

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

★ Open dom/outside.html. ★ Bekijk de broncode en test de pagina in een browser.

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.

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

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

Rond de selector

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

★ Open dom/around.html. ★ Bekijk de broncode en test de pagina in een browser.

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.

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

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.

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

De HTML-code wijzigt van:

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

Naar:

...
<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.

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

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().

★ Open dom/before_insertBefore.html. ★ Bekijk de broncode en test de pagina in een browser.

$('#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.

★ Pas de code als volgt aan:

$('#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);

• kader op foto: $(nieuweCode).addClass(...).insertBefore(selector);

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);

• kader op p-tag: $(selector).before(nieuweCode).addClass(...);

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

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

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().

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.