Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Egenskaberne indreHTML og ydreHTML DOM giver dig mulighed for at læse og skrive indhold på en webside. Du kan bruge dem til at hente markeringer eller foretage ændringer i det, og de to ligner hinanden på mange måder. Men der er en væsentlig forskel.

Når du arbejder med DOM, vil du bruge innerHTML og outerHTML helt forskelligt. Find ud af, hvordan du bruger disse to egenskaber med praktiske eksempler.

Hvad er indre HTML?

Egenskaben innerHTML er en del af DOM og du kan få adgang til det via JavaScript. Du kan bruge det til at hente eller indstille indholdet af et element. Dette indhold ekskluderer elementets eget tag og inkluderer kun den markup, der repræsenterer elementets børn, i form af en streng.

Overvej dette kodeeksempel:

<html>
<legeme>
<sid="min P">Jeg er et afsnit.s>


<manuskript>
dokument.getElementById("min P").innerHTML = "Hej Verden";
manuskript>
legeme>


html>
instagram viewer

I din browser vil du se et standardafsnit med erstatningsteksten, som sådan:

Egenskaben innerHTML vælger og ændrer indholdet afelement i dette eksempel.

Hvad er ydre HTML?

Den ydreHTML egenskab er ligesom innerHTML på mange måder. Du kan bruge det til at hente eller indstille indholdet af et valgt element. Det sætter dog også den markup, der repræsenterer selve elementet. Dette inkluderer åbningstagget, eventuelle egenskaber og - hvor det er relevant - det afsluttende tag.

Se det forrige eksempel igen for at se, hvordan outerHTML adskiller sig:

<html>
<legeme>
<sid="min P">Jeg er et afsnit.s>


<manuskript>
dokument.getElementById("min P").ydreHTML = "
Denne H1 erstattede et stk.
"
manuskript>
legeme>
html>

I din browser bør du se noget som dette:

I dette eksempel ændrer egenskaben outerHTML s element til en h1 element.

Kend forskellen, og hvornår du skal bruge disse egenskaber

Egenskaberne for innerHTML og outerHTML DOM har mange ligheder, men en vigtig forskel. Egenskaben innerHTML fanger HTML-indholdet af et element. I modsætning hertil fanger egenskaben outerHTML den HTML, der repræsenterer selve elementet og dets indhold.

Du kan bruge disse egenskaber til at læse og skrive HTML-indhold via DOM. DOM vil være et fælles, vigtigt koncept gennem hele din JavaScript-udviklingsproces.