Leer hoe u een element in jQuery maakt

Het maken van een nieuw element is een van de meest elementaire taken die u kunt uitvoeren met de jQuery JavaScript-bibliotheek. Met jQuery is de taak een stuk eenvoudiger dan de equivalente aanpak met het Document Object Model (DOM). Je zult het ook flexibeler en expressiever vinden, hoe meer je jQuery gebruikt.

Om een ​​doel te dienen, moet u uw element aan een webpagina kunnen toevoegen. Leer hoe u een nieuw lijstitem toevoegt of een alinea vervangt door nieuwe inhoud met jQuery.

Wat is jQuery?

De jQuery-bibliotheek is een verzameling van: JavaScript code met twee hoofddoelen:

• Het vereenvoudigt algemene JavaScript-bewerkingen.
• Het behandelt JavaScript-problemen met cross-compatibiliteit tussen verschillende browsers.

Het tweede doel is gericht op bugs, maar het adresseert ook implementatieverschillen tussen browsers. Beide doelen zijn minder noodzakelijk dan vroeger, omdat browsers in de loop van de tijd verbeteren. Maar jQuery kan nog steeds een waardevol hulpmiddel zijn.

Wat is een element?

Een element wordt soms een tag genoemd. Hoewel de twee vaak door elkaar worden gebruikt, is er een subtiel verschil. Een tag verwijst naar de letterlijke of

 u opneemt in een HTML-bestand om de tekstinhoud te markeren. Een element is het object achter de schermen dat de gemarkeerde tekst vertegenwoordigt. Beschouw een element als de DOM tegenhanger van de HTML-tags.

Een nieuw element maken met jQuery

Zoals de meeste jQuery-bewerkingen, begint het maken van een element met de dollarfunctie, $(). Dit is een snelkoppeling naar de kern jQuery() functie. Deze functie heeft drie verschillende doelen, namelijk:

• Komt overeen met elementen, meestal degene die al in het document bestaan
• Creëert nieuwe elementen
• Voert een callback-functie uit wanneer de DOM gereed is

Wanneer u een string met HTML doorgeeft als de eerste parameter, zal deze functie een nieuw element creëren:

$("")

Dit retourneert een speciaal jQuery-object dat een verzameling elementen bevat. In dit geval is er een enkel object dat een "a" -element vertegenwoordigt dat we zojuist hebben gemaakt.

De tekenreeks moet op HTML lijken om deze actie te onderscheiden van overeenkomende elementen. In de praktijk betekent dit dat de string moet beginnen met a <. U kunt met deze methode geen platte tekst aan het document toevoegen.

Het is belangrijk om te begrijpen dat dit het element niet aan uw document toevoegt, maar alleen een nieuw element maakt dat u kunt toevoegen. Het element is 'los', neemt geheugen in beslag, maar maakt nog geen deel uit van de laatste pagina.

Complexere HTML toevoegen

De dollarfunctie kan in feite meer dan één element creëren. In feite kan het elke gewenste structuur van HTML-elementen bouwen:

$("

een
twee
drie
")

U kunt dit formaat ook gebruiken om een ​​element met attributen te maken:

$('')

Attributen instellen op een nieuw element

U kunt een nieuw jQuery-element maken en de kenmerken ervan instellen zonder dat u zelf de volledige HTML-string hoeft te bouwen. Dit is handig als u attribuutwaarden dynamisch genereert. Bijvoorbeeld:

foto = nieuwe Date().getHours() > 12? "afternoon.jpg": "morning.jpg";
$("", { src: foto });

Een element toevoegen

Nadat u een nieuw element hebt gemaakt, kunt u dit op verschillende manieren aan het document toevoegen. De jQuery-documentatie verzamelt deze methoden onder de categorie ‘manipulatie’.

Toevoegen als het onderliggende element van een bestaand element

$("lichaam").toevoegen($("
Hallo Wereld
"));
$(document.body).append($el);

U kunt deze methode bijvoorbeeld gebruiken om een ​​nieuw lijstitem aan het einde van een lijst toe te voegen.

Voeg het toe als de broer of zus van een bestaand element

$("p.laatste").after("
Een nieuwe paragraaf
")
$("ul li: eerste").before("
nieuw item
")

Dit is een goede keuze als u bijvoorbeeld tussen twee andere alinea's een nieuwe alinea wilt toevoegen.

Een bestaand element vervangen

U kunt een bestaand element omwisselen voor een nieuw gemaakt element met behulp van de vervangen door() methode:

$('#oud').replaceWith("
Nieuwe alinea
");

Wikkel rond een bestaand element

Dit is een vrij zeldzame use-case, maar misschien wilt u een bestaand element insluiten in een nieuw element. U heeft bijvoorbeeld een code element dat u wilt omwikkelen in een pre:

$('code#n1').wrap("
")

Toegang tot het element dat u hebt gemaakt

De $() functie retourneert een jQuery-object. Dit is handig voor vervolgoperaties:

$el = $("p");
$('lichaam').toevoegen($el);

Merk op dat jQuery-programmeurs volgens afspraak vaak jQuery-variabelen een leidend dollarteken geven. Dit is gewoon een naamgevingsschema en is niet direct gerelateerd aan de $() functie.

Elementen maken met jQuery

Hoewel je de DOM kunt manipuleren met behulp van native JavaScript-functies, maakt jQuery het veel gemakkelijker om dit te doen. Het is nog steeds erg handig om de DOM goed te begrijpen, maar jQuery maakt het werken ermee een stuk prettiger.

De verborgen held van websites: de DOM begrijpen

Webdesign leren en meer weten over het Document Object Model? Dit is wat u moet weten over de DOM.

Lees volgende

Over de auteur