Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

InnerHTML og outerHTML DOM-egenskapene lar deg lese og skrive innhold på en nettside. Du kan bruke dem til å hente markeringer eller gjøre endringer i det, og de to er like på mange måter. Men det er en betydelig forskjell.

Når du arbeider med DOM, vil du bruke innerHTML og outerHTML ganske annerledes. Finn ut hvordan du bruker disse to egenskapene med praktiske eksempler.

Hva er indre HTML?

InnerHTML-egenskapen er en del av DOM og du kan få tilgang til den via JavaScript. Du kan bruke den til å hente eller angi innholdet i et element. Dette innholdet ekskluderer elementets egen tag og inkluderer bare markeringen som representerer elementets barn, i form av en streng.

Tenk på dette kodeeksemplet:

<html>
<kropp>
<sid="min p">Jeg er et avsnitt.s>


<manus>
dokument.getElementById("min p").innerHTML = "Hei Verden";
manus>
kropp>


html>

I nettleseren din vil du se et standardavsnitt med erstatningsteksten, slik:

InnerHTML-egenskapen velger og endrer innholdet ielement i dette eksemplet.

Hva er Ytre HTML?

OuterHTML-egenskapen er som innerHTML på mange måter. Du kan bruke den til å hente eller angi innholdet i et valgt element. Imidlertid setter den også markeringen som representerer selve elementet. Dette inkluderer åpningstaggen, eventuelle egenskaper og – der det er relevant – den avsluttende taggen.

Gå tilbake til forrige eksempel for å se hvordan outerHTML er forskjellig:

<html>
<kropp>
<sid="min p">Jeg er et avsnitt.s>


<manus>
dokument.getElementById("min p").outerHTML = "
Denne H1 erstattet et avsnitt.
"
manus>
kropp>
html>

I nettleseren din bør du se noe slikt:

I dette eksemplet endrer outerHTML-egenskapen s element til en h1 element.

Kjenn forskjellen og når du skal bruke disse egenskapene

InnerHTML og outerHTML DOM-egenskapene har mange likheter, men en viktig forskjell. InnerHTML-egenskapen fanger opp HTML-innholdet til et element. I kontrast fanger outerHTML-egenskapen HTML-en som representerer selve elementet og dets innhold.

Du kan bruke disse egenskapene til å lese og skrive HTML-innhold via DOM. DOM vil være et felles, viktig konsept gjennom hele JavaScript-utviklingsprosessen.