Undersøgelse af DOM-Egenskaber i JavaScript

JavaScript tilbyder flere egenskaber til at få adgang til og manipulere indholdet. Forståelse af disse egenskaber gør det muligt at opdatere websidens indhold dynamisk baseret på brugerinteraktioner eller andre betingelser.

InnerHTML

Egenskaben innerHTML gør det muligt at hente eller angive HTML-indholdet for et element, inklusive tags og tekst. Det er en af de mest anvendte egenskaber til dynamisk opdatering af sideindhold.

index.html

index.js

innerHTML henter alt indhold, inklusive HTML-tags, og muliggør indsættelse eller opdatering af indhold med HTML-tags.

TextContent

textContent-egenskaben henter eller angiver tekstindholdet for et element og fjerner alle HTML-tags. Ideel til arbejde med almindelig tekst uden hensyntagen til HTML-strukturen.

index.html

index.js

textContent henter kun tekstindhold, ignorerer HTML-tags og indsætter almindelig tekst, hvor alle tags automatisk undslippes.

Værdi

value-egenskaben anvendes med formelementer som <input>, <textarea> og <select>, hvilket muliggør at hente eller angive den værdi, brugeren har indtastet.

index.html

index.js

value henter den aktuelle værdi af formelementer og angiver en ny værdi for input-, textarea- eller select-elementer.

Forskelle mellem InnerHTML og TextContent

Praktisk eksempel: Opdatering af en brugerprofil

Forestil dig en brugerprofilside, hvor de indledende data vises, og brugeren kan opdatere sine profildetaljer via en formular. Når brugeren indsender formularen, opdateres indholdet på siden dynamisk.

index.html

index.css

index.js

Oprindeligt viser profilen et foruddefineret brugernavn og en bio, som kan ændres via inputfelter. Når knappen "Gem ændringer" klikkes, opdaterer JavaScript den viste profil: textContent opdaterer brugernavnet som almindelig tekst, mens innerHTML opdaterer bioen for at muliggøre grundlæggende HTML-formatering, så alle brugerens ændringer afspejles.

1. Hvad gør egenskaben `innerHTML`?

2. Hvornår anvendes `textContent` i stedet for `innerHTML`?

3. Hvad vil følgende kode udskrive?

4. Hvilken egenskab bruges til at hente eller angive værdien af et `<input>`-element?

Hvad gør egenskaben innerHTML?

Select the correct answer

Den henter kun tekstindholdet af et element.

Den henter eller sætter HTML-indholdet af et element, inklusive tags og tekst.

Den henter værdien af et inputfelt.

Den henter kun underordnede noder af et element.

Hvornår anvendes textContent i stedet for innerHTML?

Select the correct answer

Når indhold skal angives eller hentes som almindelig tekst uden HTML-tags.

Når der skal tilføjes flere underordnede elementer.

Når HTML med tags skal angives.

Ved arbejde med input-elementer.

Hvad vil følgende kode udskrive?

Select the correct answer

Hello, <strong>World!</strong>

Hello, World!

<strong>World!</strong>

World!

Hvilken egenskab bruges til at hente eller angive værdien af et <input>-element?

Select the correct answer

textContent

innerHTML

value

placeholder

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 6

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain when to use innerHTML vs textContent in real projects?

What are some security best practices when using innerHTML?

Can you provide more examples of using the value property with form elements?

Awesome!

Completion rate improved to 2.22

Undersøgelse af DOM-Egenskaber i JavaScript

Stryg for at vise menuen

InnerHTML

Egenskaben innerHTML gør det muligt at hente eller angive HTML-indholdet for et element, inklusive tags og tekst. Det er en af de mest anvendte egenskaber til dynamisk opdatering af sideindhold.

index.html

index.js

innerHTML henter alt indhold, inklusive HTML-tags, og muliggør indsættelse eller opdatering af indhold med HTML-tags.

TextContent

textContent-egenskaben henter eller angiver tekstindholdet for et element og fjerner alle HTML-tags. Ideel til arbejde med almindelig tekst uden hensyntagen til HTML-strukturen.

index.html

index.js

textContent henter kun tekstindhold, ignorerer HTML-tags og indsætter almindelig tekst, hvor alle tags automatisk undslippes.

Værdi

value-egenskaben anvendes med formelementer som <input>, <textarea> og <select>, hvilket muliggør at hente eller angive den værdi, brugeren har indtastet.

index.html

index.js

value henter den aktuelle værdi af formelementer og angiver en ny værdi for input-, textarea- eller select-elementer.

Forskelle mellem InnerHTML og TextContent

Praktisk eksempel: Opdatering af en brugerprofil

index.html

index.css

index.js

1. Hvad gør egenskaben `innerHTML`?

2. Hvornår anvendes `textContent` i stedet for `innerHTML`?

3. Hvad vil følgende kode udskrive?

4. Hvilken egenskab bruges til at hente eller angive værdien af et `<input>`-element?

Hvad gør egenskaben innerHTML?

Select the correct answer

Den henter kun tekstindholdet af et element.

Den henter eller sætter HTML-indholdet af et element, inklusive tags og tekst.

Den henter værdien af et inputfelt.

Den henter kun underordnede noder af et element.

Hvornår anvendes textContent i stedet for innerHTML?

Select the correct answer

Når indhold skal angives eller hentes som almindelig tekst uden HTML-tags.

Når der skal tilføjes flere underordnede elementer.

Når HTML med tags skal angives.

Ved arbejde med input-elementer.

Hvad vil følgende kode udskrive?

Select the correct answer

Hello, <strong>World!</strong>

Hello, World!

<strong>World!</strong>

World!

Hvilken egenskab bruges til at hente eller angive værdien af et <input>-element?

Select the correct answer

textContent

innerHTML

value

placeholder

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 6

Undersøgelse af DOM-Egenskaber i JavaScript

InnerHTML

TextContent

Værdi

Forskelle mellem InnerHTML og TextContent

Praktisk eksempel: Opdatering af en brugerprofil

1. Hvad gør egenskaben innerHTML?

2. Hvornår anvendes textContent i stedet for innerHTML?

3. Hvad vil følgende kode udskrive?

4. Hvilken egenskab bruges til at hente eller angive værdien af et <input>-element?

Awesome!

Undersøgelse af DOM-Egenskaber i JavaScript

InnerHTML

TextContent

Værdi

Forskelle mellem InnerHTML og TextContent

Praktisk eksempel: Opdatering af en brugerprofil

1. Hvad gør egenskaben innerHTML?

2. Hvornår anvendes textContent i stedet for innerHTML?

3. Hvad vil følgende kode udskrive?

4. Hvilken egenskab bruges til at hente eller angive værdien af et <input>-element?

1. Hvad gør egenskaben `innerHTML`?

2. Hvornår anvendes `textContent` i stedet for `innerHTML`?

4. Hvilken egenskab bruges til at hente eller angive værdien af et `<input>`-element?

1. Hvad gør egenskaben `innerHTML`?

2. Hvornår anvendes `textContent` i stedet for `innerHTML`?

4. Hvilken egenskab bruges til at hente eller angive værdien af et `<input>`-element?