jQuery - Elementen toevoegen
Met jQuery is het eenvoudig om nieuwe elementen/inhoud toe te voegen.
Nieuwe HTML-inhoud toevoegen
We zullen vier jQuery-methoden bekijken die worden gebruikt om nieuwe inhoud toe te voegen:
append()- Voegt inhoud toe aan het einde van de geselecteerde elementenprepend()- Voegt inhoud toe aan het begin van de geselecteerde elementenafter()- Voegt inhoud in na de geselecteerde elementenbefore()- Voegt inhoud in vóór de geselecteerde elementen
jQuery append() Methode
De jQuery append()-methode voegt inhoud in AAN HET EINDE van de geselecteerde HTML-elementen.
Voorbeeld
$("p").append("Some appended text.");
jQuery prepend() Methode
De jQuery prepend()-methode voegt inhoud toe AAN HET BEGIN van de geselecteerde HTML-elementen.
Voorbeeld
$("p").prepend("Some prepended text.");
Voeg verschillende nieuwe elementen toe met append() en prepend()
In beide bovenstaande voorbeelden hebben we alleen wat tekst/HTML ingevoegd aan het begin/einde van de geselecteerde HTML-elementen.
Zowel de append()en prepend()methoden kunnen echter een oneindig aantal nieuwe elementen als parameters nemen. De nieuwe elementen kunnen worden gegenereerd met tekst/HTML (zoals we hebben gedaan in de bovenstaande voorbeelden), met jQuery, of met JavaScript-code en DOM-elementen.
In het volgende voorbeeld maken we verschillende nieuwe elementen aan. De elementen zijn gemaakt met tekst/HTML, jQuery en JavaScript/DOM. Vervolgens voegen we de nieuwe elementen toe aan de tekst met de append()methode (dit zou ook hebben gewerkt
prepend()):
Voorbeeld
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery after() en before() Methoden
De jQuery after()-methode voegt inhoud in NA de geselecteerde HTML-elementen.
De jQuery before()-methode voegt inhoud in VOOR de geselecteerde HTML-elementen.
Voorbeeld
$("img").after("Some text after");
$("img").before("Some text before");
Voeg verschillende nieuwe elementen toe met after() en before()
Ook kunnen zowel de after()en before()methoden een oneindig aantal nieuwe elementen als parameters nemen. De nieuwe elementen kunnen worden gegenereerd met tekst/HTML (zoals we hebben gedaan in het bovenstaande voorbeeld), met jQuery, of met JavaScript-code en DOM-elementen.
In het volgende voorbeeld maken we verschillende nieuwe elementen aan. De elementen zijn gemaakt met tekst/HTML, jQuery en JavaScript/DOM. Vervolgens voegen we de nieuwe elementen in de tekst met de after()methode (dit zou ook hebben gewerkt
before()):
Voorbeeld
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
jQuery-oefeningen
jQuery HTML-referentie
Ga voor een compleet overzicht van alle jQuery HTML-methoden naar onze jQuery HTML/CSS Reference .