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 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-motsvarigheten 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:
$("<a>")
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 minne 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:
$("<ul><li>one</li><li>two</li><li>three</li></ul>")
Du kan också använda det här formatet för att skapa ett element med attribut:
$('<img src="https://www.makeuseof.com/jquery-create-element/photo.jpg" alt="my hometown" />')
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:
photo = new Date().getHours() > 12 ? "afternoon.jpg" : "morning.jpg";
$("<img>", { src: photo });
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
$("body").append($("<p>Hello, world</p>"));
$(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("<p>A new paragraph</p>")
$("ul li:first").before("<li>new item</li>")
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("<p>New paragraph</p>");
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("<pre>")
Åtkomst till elementet du har skapat
De $() funktion returnerar ett jQuery-objekt. Detta är användbart för uppföljningsoperationer:
$el = $("p");
$('body').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.
Om författaren
Bobby Jack (65 artiklar publicerade)
Bobby är en teknikentusiast som arbetat som mjukvaruutvecklare under de flesta av två decennier. Han brinner för spel, arbetar som chefredaktör på Switch Player Magazine och är fördjupad i alla aspekter av onlinepublicering och webbutveckling.
Mer från Bobby Jack
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
