JQuery - innehåll i element

Att komma åt innehåll

I grunden finns det två sätt på vilket man kan få tillgång till innehållet i en DOM-nod. 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 noden. Vi kan både läsa ut innehållet eller ändra på innehållet i noden.

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

OBS man kan inte läsa ut innehållet i formulärelement med dessa två kommandon. 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. Tryck på fliken "Result" för att se hur slutresultatet blir att se ut.

.text()

Nod med enkelt innehåll

Om du vill ha den rena texten 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.

(Återigen, tryck på "Result" för att se resultatet.)

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 ur 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 motsvarande DOM-nod.

På rad två väljer vi ut det p-element som ligger i ett element som har ID 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 den utvalda noden 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. Variabeln innehåller den text vi läste ut på föregående rad, dvs innehållet i p-elementet med klassen a. Det vill säga texten "Paragraf 1".

Nod med komplext innehåll

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

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

I detta fall väljer vi ut den div som innehåller ett antal p-element. Som resultat får vi allt textinnehåll som finns i de olika p-elementen. Med andra ord så läser text() ut texten ur elementet och alla dess underelement. Det kan alltså vara bra att vara mycket specifik i vilket element man väljer ut, om man inte vill råka få med massa extratext.

Läsa flera noder 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 texten 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 innan vi skriver över detta.

Sätta flera noder 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.

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.

Ändra innehåll i en komplex nod

Nu ska vi prova att ersätta textinnehållet på 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 och de försvann därmed ifrån vår DOM. .html() Om man vill ha med den rena HTML-kod som byggt upp utvald nod, använder man sig av ”.html()”. Ett exempel på detta: jWVPVd 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, vi får enbart innehållet i det! Lägg märke till att vi även får med de attribut som är satta för varje element. Om vi istället skulle visa det utlästa innehållet med ”.html(a)” skulle resultatet bli följande: zroGZG Webbläsaren omvandlade alltså strängen med HTML-kod till nytt innehåll och skapade nya element utifrån detta. Att göra dylika ändringar 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 stor samtidig ändring, istället för många att göra många små. Då behövs bara sidan ritas om en gång. Förstås så gör du detta enbart när det ä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, som kanske är olika bra på olika saker. Rent generellt är det bäst att skriva klart sin applikation, så allt fungerar och sedan efter det börja optimera.