jQuery toevoegen van elementen

Met jQuery kan het toevoegen van nieuwe elementen/inhoud gemakkelijk worden gedaan.

Voeg nieuwe HTML-inhoud toe

We zullen vier jQuery methoden leren die worden gebruikt om nieuwe inhoud toe te voegen:

  • append() - Voeg inhoud toe aan het einde van het geselecteerde element
  • prepend() - Voeg inhoud toe aan het begin van het geselecteerde element
  • after() - Voeg inhoud toe na het geselecteerde element
  • before() - Voeg inhoud toe voor het geselecteerde element

jQuery append() methode

De jQuery append() methode voegt inhoud toe aan het einde van het geselecteerde element.

Voorbeeld

$("p").append("Enkele toegevoegde tekst.");

Probeer het zelf uit

jQuery prepend() methode

De jQuery prepend() methode voegt inhoud toe aan het begin van het geselecteerde element.

Voorbeeld

$("p").prepend("Enkele voorgetrokken tekst.");

Probeer het zelf uit

Voeg enkele nieuwe elementen toe met append() en prepend() methoden

In het voorbeeld hierboven voegen we alleen tekst/HTML in aan het begin/einde van de geselecteerde elementen in.

append() en prepend() methoden kunnen een oneindige hoeveelheid nieuwe elementen als argumenten aanvaarden. Tekst/HTML kan worden gegenereerd met jQuery (zoals in het voorbeeld hierboven), of met JavaScript-code en DOM-elementen.

In het volgende voorbeeld maken we enkele nieuwe elementen. Deze elementen kunnen worden gemaakt met text/HTML, jQuery of JavaScript/DOM. Vervolgens voegen we deze nieuwe elementen toe aan de tekst via de append() methode (voor prepend() geldt hetzelfde):

Voorbeeld

function appendText()
{
var txt1="<p>Tekst.</p>";               // Met HTML een nieuw element maken
var txt2=$("<p></p>").text("Tekst.");   // Met jQuery een nieuw element maken
var txt3=document.createElement("p");  // Maak een nieuw element via DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Voeg nieuwe elementen toe
{}

Probeer het zelf uit

jQuery after() en before() methoden

De jQuery after() methode voegt inhoud toe na de geselecteerde elementen.

De jQuery before() methode voegt inhoud toe voor de geselecteerde elementen.

Voorbeeld

$("img").after("Some text after");
$("img").before("Some text before");

Probeer het zelf uit

Voeg nieuwe elementen toe met after() en before() methoden

De after() en before() methoden kunnen oneindig veel nieuwe elementen accepteren als parameters. Nieuwe elementen kunnen worden gemaakt met text/HTML, jQuery of JavaScript/DOM.

In het volgende voorbeeld maken we enkele nieuwe elementen. Deze elementen kunnen worden gemaakt met text/HTML, jQuery of JavaScript/DOM. Vervolgens voegen we deze nieuwe elementen toe aan de tekst via de after() methode (het werkt ook met de before() methode):

Voorbeeld

function afterText()
{
var txt1="<b>I </b>";                    // Maak een nieuw element via HTML
var txt2=$("<i></i>").text("love ");     // Maak een nieuw element via jQuery
var txt3=document.createElement("big");  // Maak een nieuw element via DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Voeg nieuwe elementen in na img
{}

Probeer het zelf uit

jQuery HTML referentiemanual

Voor het volledige overzicht van de jQuery HTML-methoden, raadpleeg het volgende referentiemanual: