Met de eigenschappen innerHTML en outerHTML DOM kunt u inhoud op een webpagina lezen en schrijven. Je kunt ze gebruiken om markeringen op te halen of er wijzigingen in aan te brengen, en de twee zijn in veel opzichten vergelijkbaar. Maar er is een significant verschil.
Wanneer u met de DOM werkt, gebruikt u innerHTML en outerHTML heel anders. Ontdek hoe u deze twee eigenschappen kunt gebruiken met praktische voorbeelden.
Wat is innerlijke HTML?
De eigenschap innerHTML maakt deel uit van de DOM en je hebt er toegang toe via JavaScript. U kunt het gebruiken om de inhoud van een element op te halen of in te stellen. Deze inhoud sluit de eigen tag van het element uit en bevat alleen de opmaak die de kinderen van het element vertegenwoordigt, in de vorm van een tekenreeks.
Overweeg dit codevoorbeeld:
<html><lichaam>
<PID kaart="mijnP">Ik ben een alinea.P>
<script>
document.getElementById("mijnP").innerHTML = "Hallo Wereld";
script>
lichaam>
html>
In uw browser ziet u een standaardalinea met de vervangende tekst, zoals:
De eigenschap innerHTML selecteert en wijzigt de inhoud van hetelement in dit voorbeeld.
Wat is buitenste HTML?
De eigenschap outerHTML lijkt in veel opzichten op innerHTML. U kunt het gebruiken om de inhoud van een geselecteerd element op te halen of in te stellen. Het stelt echter ook de opmaak in die het element zelf vertegenwoordigt. Dit omvat de openingstag, eventuele eigenschappen en, waar relevant, de sluitingstag.
Bekijk het vorige voorbeeld opnieuw om te zien hoe outerHTML verschilt:
<html><lichaam>
<PID kaart="mijnP">Ik ben een alinea.P><script>
document.getElementById("mijnP").outerHTML = "Deze H1 verving een alinea.
"
script>
lichaam>
html>
In uw browser zou u zoiets als dit moeten zien:
In dit voorbeeld verandert de eigenschap outerHTML het P element in een h1 element.
Ken het verschil en wanneer u deze eigenschappen moet gebruiken
De eigenschappen innerHTML en outerHTML DOM hebben veel overeenkomsten, maar één belangrijk verschil. De eigenschap innerHTML legt de HTML-inhoud van een element vast. De eigenschap outerHTML legt daarentegen de HTML vast die het element zelf en de inhoud ervan vertegenwoordigt.
U kunt deze eigenschappen gebruiken om HTML-inhoud te lezen en te schrijven via de DOM. De DOM zal een algemeen, belangrijk concept zijn tijdens uw JavaScript-ontwikkelingsproces.
