Lær hvordan du opretter et element i jQuery

Oprettelse af et nyt element er en af ​​de mest grundlæggende opgaver, du kan udføre med jQuery JavaScript-biblioteket. Ved at bruge jQuery er opgaven meget enklere end den tilsvarende tilgang med Document Object Model (DOM). Du vil også finde det mere fleksibelt og udtryksfuldt, jo mere du bruger jQuery.

For at tjene et formål skal du være i stand til at tilføje dit element til en webside. Lær, hvordan du tilføjer et nyt listeelement eller erstatter et afsnit med nyt indhold ved hjælp af jQuery.

Hvad er jQuery?

jQuery-biblioteket er en samling af JavaScript kode med to primære formål:

• Det forenkler almindelige JavaScript-operationer.
• Det håndterer krydskompatibilitet JavaScript-problemer mellem forskellige browsere.

Det andet mål tager højde for fejl, men det adresserer også implementeringsforskelle mellem browsere. Begge mål er mindre nødvendige end de plejede at være, da browsere forbedres over tid. Men jQuery kan stadig være et værdifuldt værktøj.

Hvad er et element?

Et element omtales nogle gange som et tag. Selvom de to ofte bruges i flæng, er der en subtil forskel. Et tag refererer til det bogstavelige eller

 du inkluderer i en HTML-fil for at markere tekstindholdet. Et element er objektet bag kulisserne, der repræsenterer den markerede tekst. Tænk på et element som DOM modstykke til HTML-tags.

Sådan opretter du et nyt element ved hjælp af jQuery

Som de fleste jQuery-operationer starter oprettelse af et element med dollar-funktionen, $(). Dette er en genvej til kernen jQuery() fungere. Denne funktion har tre forskellige formål, nemlig:

• Matcher elementer, normalt dem, der allerede findes i dokumentet
• Opretter nye elementer
• Kører en tilbagekaldsfunktion, når DOM'en er klar

Når du sender en streng, der indeholder HTML som den første parameter, vil denne funktion oprette et nyt element:

$("")

Dette returnerer et specielt jQuery-objekt, som indeholder en samling af elementer. I dette tilfælde er der et enkelt objekt, der repræsenterer et "a"-element, som vi lige har oprettet.

Strengen skal ligne HTML for at skelne denne handling fra matchende elementer. I praksis betyder det, at strengen skal begynde med et <. Du kan ikke tilføje almindelig tekst til dokumentet ved hjælp af denne metode.

Det er vigtigt at forstå, at dette ikke tilføjer elementet til dit dokument, det skaber kun et nyt element, der er klar til at tilføje. Elementet er 'uforbundet', optager hukommelsen, men er faktisk ikke en del af den sidste side – endnu.

Tilføjelse af mere kompleks HTML

Dollarfunktionen kan faktisk skabe mere end ét element. Faktisk kan den bygge ethvert træ af HTML-elementer, du ønsker:

$("

en
to
tre
")

Du kan også bruge dette format til at oprette et element med attributter:

$('')

Sådan indstilles attributter på et nyt element

Du kan oprette et nyt jQuery-element og indstille dets attributter uden at skulle bygge hele HTML-strengen selv. Dette er nyttigt, hvis du genererer attributværdier dynamisk. For eksempel:

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

Sådan tilføjes et element

Når du har oprettet et nyt element, kan du tilføje det til dokumentet på flere forskellige måder. jQuery-dokumentationen samler disse metoder under kategorien 'manipulation'.

Tilføj som barn af et eksisterende element

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

Du kan f.eks. bruge denne metode til at tilføje et nyt listeelement i slutningen af ​​en liste.

Tilføj det som søskende til et eksisterende element

$("p.last").after("
Et nyt afsnit
")
$("ul li: først").before("
ny vare
")

Dette er et godt valg, hvis du for eksempel vil tilføje et nyt afsnit i midten af ​​to andre.

Udskift et eksisterende element

Du kan bytte et eksisterende element ud med et nyoprettet element ved hjælp af Erstat med() metode:

$('#old').replaceWith("
Nyt afsnit
");

Vikl om et eksisterende element

Dette er et ret sjældent tilfælde, men du vil måske vedlægge et eksisterende element i et nyt. For eksempel kan du have en kode element, som du vil pakke ind i en præ:

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

Adgang til det element, du har oprettet

Det $() funktion returnerer et jQuery-objekt. Dette er nyttigt til opfølgende operationer:

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

Bemærk, at jQuery-programmører efter konvention ofte navngiver jQuery-variabler med et førende dollartegn. Dette er simpelthen et navneskema og er ikke direkte relateret til $() fungere.

Oprettelse af elementer ved hjælp af jQuery

Selvom du kan manipulere DOM ved hjælp af native JavaScript-funktioner, gør jQuery det meget nemmere at gøre det. Det er stadig meget nyttigt at have en god forståelse af DOM, men jQuery gør arbejdet med det meget mere behageligt.

The Hidden Hero of Websites: Understanding the DOM

Lærer du webdesign og har du brug for at vide mere om Document Object Model? Her er hvad du behøver at vide om DOM.

Læs Næste

Om forfatteren