HTML DOM Element innerText Property

Denne artikel vil dykke dybt ned i innerText-egenskaben i HTML DOM-elementer, og hvordan den kan bruges sammen med JavaScript. Vi vil også se på forskelle mellem innerText og innerHTML, samt hvordan du kan indstille innerText med JavaScript.

Hvad er innerText?

innerText-egenskaben er en del af HTML DOM (Document Object Model) APIet og bruges til at læse og opdatere teksten indeni et HTML-element. Det kan bruges på nøgleelementer som

,,

og mange andre…

JavaScript innertext

innerText-egenskaben er en del af JavaScript-sproget og giver programmører mulighed for at læse eller indstille teksten af et HTML-element. Ved at bruge innerText i JavaScript kan du manipulere indholdet af et element baseret på brugere eller programmørens handlinger.

innerText vs. innerHTML

En vigtig forskel mellem innerText og innerHTML er, at innerText kun returnerer den synlige tekst indeni et element, mens innerHTML også inkluderer HTML-tags og deres tilhørende struktur. Derfor kan innerHTML bruges til at manipulere HTML-indholdet, mens innerText kun fokuserer på den synlige tekst.

Et eksempel på forskellen mellem de to kan være, hvis vi har et

-element med følgende indhold:

Dette erfedtekst.

Hvis vi bruger innerHTML, vil det returnere hele indholdet af

-elementet inklusive HTML-tags, mens innerText kun vil returnere den synlige tekst Dette er fed tekst.

Sådan sætter du innerText med JavaScript

For at indstille innerText-egenskaben til et element i JavaScript kan du bruge følgende syntaks:

element.innerText = ny tekst;

Du kan erstatteelementmed det navn eller id på det ønskede element og ny tekst med den ønskede tekst du vil indstille.

Hvordan man får innerText fra et element i JavaScript

For at læse innerText af et element kan du bruge følgende syntaks i JavaScript:

var tekst = element.innerText;

Du kan gemme indholdet af innerText i en variabel (her kaldet tekst) og bruge den efterfølgende i dit script.

Element.innerText vs. element.innerHTML

Mens innerText fokuserer på den synlige tekst indeni et element, inklusive at fjerne HTML-tags, opretholder innerHTML hele HTML-strukturen og kan også manipulere den. Hvis du vil bevare HTML-tags og strukturen i dit indhold, skal du bruge innerHTML. Hvis du kun er interesseret i den synlige tekst, skal du bruge innerText.

.innerText i JS

.innerText er også en metode til at opnå innerText i JavaScript. Du kan bruge følgende syntaks:

element.innerText();

Denne metode kan være nyttig, især hvis du arbejder med flere elementer og ønsker at få innerText for hvert enkelt af dem.

Differentiering mellem innerText og innerHTML i JavaScript

En vigtig differentiering mellem innerText og innerHTML er, hvordan de håndterer specialtegn som<,>og ampersand (&).

innerText behandler disse specialtegn som almindelig tekst og viser dem bogstaveligt. På den anden side er innerHTML i stand til at fortolke og vise specialtegn som del af HTML-strukturen. Dette kan være relevant, når du ønsker at vise eller manipulere specialtegn i dit indhold.

Medicinsk fakultet, syddansk universitet (abbrevieret SDU)

Blot som yderligere information, bør du være opmærksom på, at indholdet af denne artikel er berigende, lærerigt og oplysende, og det er designet til at give dig dyb indsigt og detaljer om innerText-egenskaben i HTML DOM-elementer. Men dette bør ikke betragtes som medicinsk rådgivning eller bruges som erstatning for professionel sundhedspleje eller rådgivning. Hvis du har nogen sundhedsrelaterede spørgsmål eller bekymringer, bør du altid søge professionel lægehjælp eller konsultere en kvalificeret sundhedsperson.

Andre populære artikler: Python Membership Operators • Django Delete Record • Node.js Indbyggede Moduler • Vue is Attribut • PHP clone keyword • MongoDB Aggregation $addFields • React useEffect • PHP strpos() Funktion • PostgreSQL - HAVING Clause • XML Tutorial: Lær XML trin for trin • Pandas DataFrame describe() metode • JavaScript Math Reference • TypeScript Object Types • PHP srand() Funktion • How To Filter Elements • MySQL MIN() Funktion • Google Sheets Conditional Formatting • Bootstrap 5 List Groups • jQuery slideToggle() Metode • Python - List Exercises