JQuery - innehåll i element

I grunden finns det två sätt på vilka man kan få tillgång till innehållet i ett element. Dels kan vi komma åt den rena text som eventuellt står där, dels kan vi komma åt den HTML-kod som finns i elementet. Vi kan antingen läsa ut elementets innehåll eller ändra på det.

De två huvudsakliga metoderna som är till för att manipulera elements innehåll är; .text() och .html(). Vi kommer nu att gå igenom hur dessa två metoder fungerar.

OBS Dessa två kommandon kan kan inte läsa ut innehållet som finns i input-element och liknande element som används i formulär. Vill du ha innehållet ifrån t.ex. ett textfält läser du ut det med metoden .val() istället.

Grundexempel

För exemplen i denna sektion, kommer vi att använda oss av följande grund för HTML-biten:

See the Pen VempyY by Patrik Grip-Jansson (@PGJ) on CodePen.

Här skapas en enkel HTML-struktur, där topphalvan är till för att vi ska ha något att experimentera med och bottenhalvan, den gulfärgade ytan, är till för att visa upp resultatet ifrån vårt JavaScript.

.text()

Element med enkelt innehåll

Om du vill ha det rena textinnehållet som finns inuti ett element, kan du använda dig av metoden .text(). Här följer ett kort grundexempel:

See the Pen EPNjax by Patrik Grip-Jansson (@PGJ) on CodePen.

På rad ett i JavaScript-koden läser vi ut innehållet som finns i det HTML-element som har klassen a. Innehållet läses ut med metoden .text(). När man kallar på denna metod utan att ange någon parameter, så kommer jQuery att läsa ut innehållet ur angivet element.

På rad två väljer vi ut det p-element som ligger i ett element vars ID är satt till resultat. Nu använder vi oss av en parameter i text()-metoden. När vi gör detta kommer eventuellt textinnehåll i det utvalda elementet att ersättas med det innehåll som vi anger med vår parameter. I vårt fall innebär det att den nuvarande texten, "Detta skrivs över" ersätts med innehållet i vår variabel a. Denna variabel innehåller den text som vi läste ut på föregående rad, dvs innehållet i det p-element som har klassen a. Alltså texten "Stycke 1".

Element med komplext innehåll

I nästa exempel ska vi se vad som händer om vi tar ut text ifrån ett element som har flera underelement.

See the Pen GoNJoM by Patrik Grip-Jansson (@PGJ) on CodePen.

I detta fall väljer vi ut elementet som har klassen n. Detta är en div som innehåller ett antal p-element. Nu kommer vår .text() att läsa ut allt textinnehåll som finns i de olika p-elementen.

Lägg märke till att vi enbart får det rena textinnehållet. Vi får inte med något av den HTML-kod som skapat elementen. Med andra ord så läser text() ut allt textinnehåll ur elementet och alla dess underelement.

Det kan alltså vara bra att göra en mycket specifik sökning när man anger vilket element man ska välja ut, så att man inte får med en massa extra text.

Läsa flera element samtidigt

Vi provar en annan variant. Den här gången väljer vi ut alla p-element.

See the Pen gPLpro by Patrik Grip-Jansson (@PGJ) on CodePen.

Vi får då tillbaka en sträng som innehåller det sammanlagda textinnehållet ifrån alla p-element. Lägg märke till att vi även får texten som finns från början i resultat, dvs ”Detta skrivs över”. Vi läser ju ut innehållet som finns i elementeten innan vi sätter det till nytt innehåll.

Sätta flera element samtidigt

Vad händer då om vi väljer ut alla p-element och använder .text('skriv över');?

See the Pen VemLjp by Patrik Grip-Jansson (@PGJ) on CodePen.

Kolla in resultatet. Som förväntat så ersätts innehållet i varje p-element med den text vi skickade in. jQuery loopar alltså igenom alla p-element som matchas och kör den angivna metoden på varje element som matchar.

Ändra innehåll i ett komplex element

Nu ska vi prova att ersätta textinnehållet i ett element som har flera underelement.

See the Pen RroPGZ by Patrik Grip-Jansson (@PGJ) on CodePen.

Som du ser så skrevs alla underelement över med den angivna texten. De element som fanns där försvann ifrån vår DOM.

.html()

Att visa med text()

Om man inte bara vill komma åt textinnehållet, utan även vill ha med den HTML-kod som byggt upp utvalt element, använder man sig av .html(). Denna metod fungerar i stort sett såsom .text() med den skillnaden att man istället för att hantera ren text hanterar html-kod.

Ett exempel på detta:

See the Pen jWVPVd by Patrik Grip-Jansson (@PGJ) on CodePen.

Vi läser alltså ut innehållet med .html() och visar det med .text(a). Här ser vi att vi får den rena HTML-koden som motsvarar allt innehåll i vår div. Dock får vi inte med HTML-koden som skapade själva elementet vi valde ut, utan vi får enbart de innehåll som finns inuti elementet.

Lägg märke till att vi även får med de attribut som är angivna i varje element.

Att visa med html()

Om vi istället skulle visa det utlästa innehållet med .html(a) skulle resultatet bli följande:

See the Pen zroGZG by Patrik Grip-Jansson (@PGJ) on CodePen.

Webbläsaren omvandlade alltså strängen med HTML-kod till nya element. Vi kan därmed skapa nytt innehåll dynamiskt.

Att manipulera DOM är kostsamt

Återigen... Att göra ändringar i DOM kan innebära att sidan måste ritas om ifrån grunden. Vilket kan vara tungt för webbläsaren. Så gör inte detta i onödan. Försök att göra alla ändringar i en enda stor, samtidig ändring istället för att göra många små ändringar. Då behöver sidan bara ritas om en gång. Självklart så gör man ändringar enbart då detta är absolut nödvändig.

Optimering är en hel vetenskap och speciellt krångligt blir det när man börjar involvera olika webbläsare. Dessa kanske är olika bra på olika saker. Rent generellt är det bäst att skriva klart sin applikation, så allt fungerar och börja optimera först efter man har all tänkt funktionalitet färdig.

Nästa aktivitet

jQuery - element-samlingar