Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

InnerHTML och outerHTML DOM-egenskaperna låter dig läsa och skriva innehåll på en webbsida. Du kan använda dem för att hämta uppmärkning eller göra ändringar i den, och de två är lika på många sätt. Men det finns en betydande skillnad.

När du arbetar med DOM kommer du att använda innerHTML och outerHTML helt olika. Ta reda på hur du använder dessa två egenskaper med praktiska exempel.

Vad är inre HTML?

Egenskapen innerHTML är en del av DOM och du kan komma åt det via JavaScript. Du kan använda den för att hämta eller ställa in innehållet i ett element. Det här innehållet utesluter elementets egen tagg och inkluderar endast den uppmärkning som representerar elementets underordnade, i form av en sträng.

Tänk på detta kodexempel:

<html>
<kropp>
<sidid="min P">Jag är ett stycke.sid>


<manus>
dokumentera.getElementById("min P").innerHTML = "Hej världen";
manus>
kropp>


html>
instagram viewer

I din webbläsare ser du ett standardstycke med ersättningstexten, så här:

Egenskapen innerHTML väljer och ändrar innehållet ielement i detta exempel.

Vad är yttre HTML?

OuterHTML-egenskapen är som innerHTML på många sätt. Du kan använda den för att hämta eller ställa in innehållet i ett valt element. Men det ställer också in markeringen som representerar själva elementet. Detta inkluderar den inledande taggen, eventuella egenskaper och – där det är relevant – den avslutande taggen.

Gå tillbaka till föregående exempel för att se hur outerHTML skiljer sig:

<html>
<kropp>
<sidid="min P">Jag är ett stycke.sid>


<manus>
dokumentera.getElementById("min P").outerHTML = "
Denna H1 ersatte en paragraf.
"
manus>
kropp>
html>

I din webbläsare bör du se något i stil med detta:

I det här exemplet ändrar egenskapen outerHTML sid element till en h1 element.

Vet skillnaden och när du ska använda dessa egenskaper

InnerHTML och outerHTML DOM-egenskaperna har många likheter, men en viktig skillnad. Egenskapen innerHTML fångar HTML-innehållet i ett element. Däremot fångar egenskapen outerHTML HTML-koden som representerar själva elementet och dess innehåll.

Du kan använda dessa egenskaper för att läsa och skriva HTML-innehåll via DOM. DOM kommer att vara ett gemensamt, viktigt koncept genom hela din JavaScript-utvecklingsprocess.