Lär dig hur du skapar ett element i jQuery

Att skapa ett nytt element är en av de mest grundläggande uppgifterna du kan utföra med jQuery JavaScript-biblioteket. Med jQuery är uppgiften mycket enklare än motsvarande tillvägagångssätt med Document Object Model (DOM). Du kommer också att tycka att det är mer flexibelt och uttrycksfullt, ju mer du använder jQuery.

För att tjäna ett syfte måste du kunna lägga till ditt element på en webbsida. Lär dig hur du lägger till ett nytt listobjekt eller ersätter ett stycke med nytt innehåll med hjälp av jQuery.

Vad är jQuery?

jQuery-biblioteket är en samling av JavaScript kod med två primära syften:

• Det förenklar vanliga JavaScript-operationer.
• Den hanterar JavaScript-problem med korskompatibilitet mellan olika webbläsare.

Det andra syftet tillgodoser buggar, men det tar också upp implementeringsskillnader mellan webbläsare. Båda målen är mindre nödvändiga än de brukade vara, eftersom webbläsare förbättras med tiden. Men jQuery kan fortfarande vara ett värdefullt verktyg.

Vad är ett element?

Ett element kallas ibland för en tagg. Även om de två ofta används omväxlande, finns det en subtil skillnad. En tagg hänvisar till det bokstavliga eller

 du inkluderar i en HTML-fil för att markera textinnehållet. Ett element är objektet bakom kulisserna som representerar den markerade texten. Tänk på ett element som DOM motsvarighet till HTML-taggarna.

Hur man skapar ett nytt element med jQuery

Som de flesta jQuery-operationer börjar skapande av ett element med dollarfunktionen, $(). Detta är en genväg till kärnan jQuery() fungera. Denna funktion har tre distinkta syften, den:

• Matchar element, vanligtvis sådana som redan finns i dokumentet
• Skapar nya element
• Kör en återuppringningsfunktion när DOM är redo

När du skickar en sträng som innehåller HTML som första parameter, kommer den här funktionen att skapa ett nytt element:

$("")

Detta returnerar ett speciellt jQuery-objekt som innehåller en samling element. I det här fallet finns det ett enda objekt som representerar ett "a"-element som vi just skapat.

Strängen måste se ut som HTML för att skilja denna åtgärd från matchande element. I praktiken betyder det att strängen måste börja med a <. Du kan inte lägga till vanlig text i dokumentet med den här metoden.

Det är viktigt att förstå att detta inte lägger till elementet i ditt dokument, det skapar bara ett nytt element som du kan lägga till. Elementet är "okopplat", tar upp minnet men är faktiskt inte en del av den sista sidan - ännu.

Lägger till mer komplex HTML

Dollarfunktionen kan faktiskt skapa mer än ett element. Faktum är att den kan bygga vilket träd som helst av HTML-element du vill:

$("

ett
två
tre
")

Du kan också använda det här formatet för att skapa ett element med attribut:

$('')

Hur man ställer in attribut på ett nytt element

Du kan skapa ett nytt jQuery-element och ställa in dess attribut utan att behöva bygga hela HTML-strängen själv. Detta är användbart om du genererar attributvärden dynamiskt. Till exempel:

foto = new Date().getHours() > 12? "afternoon.jpg": "morgon.jpg";
$("", { källa: foto });

Hur man lägger till ett element

När du har skapat ett nytt element kan du lägga till det i dokumentet på flera olika sätt. JQuery-dokumentationen samlar dessa metoder under kategorin "manipulation"..

Lägg till som barn till ett befintligt element

$("kropp").append($("
Hej världen
"));
$(document.body).append($el);

Du kan använda den här metoden för att till exempel lägga till ett nytt listobjekt i slutet av en lista.

Lägg till det som syskon till ett befintligt element

$("p.last").after("
Ett nytt stycke
")
$("ul li: först").before("
nytt föremål
")

Detta är ett bra val om du till exempel vill lägga till ett nytt stycke i mitten av två andra.

Byt ut ett befintligt element

Du kan byta ut ett befintligt element mot ett nyskapat med hjälp av ersätta med() metod:

$('#old').replaceWith("
Nytt stycke
");

Linda runt ett befintligt element

Detta är ett ganska sällsynt användningsfall, men du kanske vill bifoga ett befintligt element i ett nytt. Till exempel kan du ha en koda element som du vill slå in i en pre:

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

Få åtkomst till elementet du har skapat

De $() funktion returnerar ett jQuery-objekt. Detta är användbart för uppföljningsoperationer:

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

Observera att jQuery-programmerare enligt konvention ofta namnger jQuery-variabler med ett ledande dollartecken. Detta är helt enkelt ett namnschema och är inte direkt relaterat till $() fungera.

Skapa element med jQuery

Även om du kan manipulera DOM med inbyggda JavaScript-funktioner, gör jQuery det mycket lättare att göra det. Det är fortfarande väldigt användbart att ha en god förståelse för DOM, men jQuery gör det mycket trevligare att arbeta med det.

The Hidden Hero of Websites: Understanding the DOM

Lär dig webbdesign och behöver veta mer om dokumentobjektmodellen? Här är vad du behöver veta om DOM.

Läs Nästa

Om författaren