Lær hvordan du lager et element i jQuery

Å lage et nytt element er en av de mest grunnleggende oppgavene du kan utføre med jQuery JavaScript-biblioteket. Ved å bruke jQuery er oppgaven mye enklere enn den tilsvarende tilnærmingen med Document Object Model (DOM). Du vil også finne det mer fleksibelt og uttrykksfullt, jo mer du bruker jQuery.

For å tjene et formål, må du kunne legge til elementet ditt på en nettside. Lær hvordan du legger til et nytt listeelement eller erstatter et avsnitt med nytt innhold ved å bruke jQuery.

Hva er jQuery?

jQuery-biblioteket er en samling av JavaScript kode med to hovedmål:

• Det forenkler vanlige JavaScript-operasjoner.
• Den håndterer krysskompatibilitet JavaScript-problemer mellom ulike nettlesere.

Det andre målet tar hensyn til feil, men det adresserer også implementeringsforskjeller mellom nettlesere. Begge målene er mindre nødvendige enn de pleide å være, ettersom nettlesere forbedres over tid. Men jQuery kan fortsatt være et verdifullt verktøy.

Hva er et element?

Et element blir noen ganger referert til som en tag. Selv om de to ofte brukes om hverandre, er det en subtil forskjell. Et merke refererer til det bokstavelige eller

 du inkluderer i en HTML-fil for å markere tekstinnholdet. Et element er objektet bak kulissene som representerer den markerte teksten. Tenk på et element som DOM motstykke til HTML-taggene.

Hvordan lage et nytt element ved hjelp av jQuery

Som de fleste jQuery-operasjoner, begynner å lage et element med dollar-funksjonen, $(). Dette er en snarvei til kjernen jQuery() funksjon. Denne funksjonen har tre forskjellige formål, den:

• Matcher elementer, vanligvis de som allerede finnes i dokumentet
• Skaper nye elementer
• Kjører en tilbakeringingsfunksjon når DOM-en er klar

Når du sender en streng som inneholder HTML som den første parameteren, vil denne funksjonen lage et nytt element:

$("")

Dette returnerer et spesielt jQuery-objekt som inneholder en samling av elementer. I dette tilfellet er det et enkelt objekt som representerer et "a"-element som vi nettopp opprettet.

Strengen må se ut som HTML for å skille denne handlingen fra samsvarende elementer. I praksis betyr dette at strengen må begynne med a <. Du kan ikke legge til ren tekst i dokumentet ved å bruke denne metoden.

Det er viktig å forstå at dette ikke legger til elementet i dokumentet ditt, det skaper bare et nytt element som er klart for deg å legge til. Elementet er «ukoblet», tar opp minnet, men er faktisk ikke en del av den siste siden – ennå.

Legger til mer kompleks HTML

Dollarfunksjonen kan faktisk lage mer enn ett element. Faktisk kan den bygge et hvilket som helst tre med HTML-elementer du ønsker:

$("

en
to
tre
")

Du kan også bruke dette formatet til å lage et element med attributter:

$('')

Hvordan sette attributter på et nytt element

Du kan opprette et nytt jQuery-element og angi dets attributter uten å måtte bygge hele HTML-strengen selv. Dette er nyttig hvis du genererer attributtverdier dynamisk. For eksempel:

bilde = new Date().getHours() > 12? "afternoon.jpg": "morgen.jpg";
$("", { kilde: bilde });

Hvordan legge til et element

Når du har opprettet et nytt element, kan du legge det til dokumentet på flere forskjellige måter. jQuery-dokumentasjonen samler disse metodene under kategorien «manipulasjon»..

Legg til som underordnet av et eksisterende element

$("body").append($("
Hei Verden
"));
$(document.body).append($el);

Du kan bruke denne metoden, for eksempel til å legge til et nytt listeelement på slutten av en liste.

Legg det til som søsken til et eksisterende element

$("p.last").after("
Et nytt avsnitt
")
$("ul li: først").before("
ny gjenstand
")

Dette er et godt valg hvis du for eksempel vil legge til et nytt avsnitt i midten av to andre.

Bytt ut et eksisterende element

Du kan bytte et eksisterende element med et nyopprettet ved å bruke Erstatt med() metode:

$('#old').replaceWith("
Ny paragraf
");

Pakk rundt et eksisterende element

Dette er en ganske sjelden brukstilfelle, men du vil kanskje legge ved et eksisterende element i et nytt. For eksempel kan du ha en kode element som du vil pakke inn i en pre:

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

Få tilgang til elementet du har opprettet

De $() funksjonen returnerer et jQuery-objekt. Dette er nyttig for oppfølgingsoperasjoner:

$el = $("p");
$('body').append($el);

Merk at jQuery-programmerere etter konvensjon ofte navngir jQuery-variabler med et ledende dollartegn. Dette er ganske enkelt et navneskjema og er ikke direkte relatert til $() funksjon.

Opprette elementer ved hjelp av jQuery

Selv om du kan manipulere DOM ved å bruke innebygde JavaScript-funksjoner, gjør jQuery det mye enklere å gjøre det. Det er fortsatt veldig nyttig å ha en god forståelse av DOM, men jQuery gjør arbeidet med det mye mer behagelig.

The Hidden Hero of Websites: Forstå DOM

Lærer du webdesign og trenger å vite mer om dokumentobjektmodellen? Her er det du trenger å vite om DOM.

Les Neste

Om forfatteren