HTML DOM Element innerHTML-eigenschap

Definitie en gebruik

innerHTML Eigenschappen instellen of retourneren van de HTML-inhoud van een element (interne HTML).

Zie ook:

innerText-eigenschap

textContent-eigenschap

Voorbeeld

Voorbeeld 1

Haal de HTML-inhoud van het element met id="myP" op:

let html = document.getElementById("myP").innerHTML;

Probeer het zelf

Voorbeeld 2

Wijzig de HTML-inhoud van het element met id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

Probeer het zelf

Voorbeeld 3

Haal de HTML-inhoud van het <ul>-element met id="myList" op:

let html = document.getElementById("myList").innerHTML;

Probeer het zelf

Voorbeeld 4

Verwijder de HTML-inhoud van het <p>-element met id="demo":

element.innerHTML = "";

Probeer het zelf

Voorbeeld 5

Wijzig de HTML-inhoud van twee elementen:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

Probeer het zelf

Voorbeeld 6

Herhaal de HTML-inhoud van het element:

element.innerHTML += element.innerHTML;

Probeer het zelf

Voorbeeld 7

Verander de HTML-inhoud en de URL van de link:

element.innerHTML = "W3School";
element.href = "";

Probeer het zelf

Syntaxis

Retourneer de property innerHTML:

element.innerHTML

Stel de property innerHTML in:

element.innerHTML = text

Eigenschapswaarde

Waarde Beschrijving
String. HTML-inhoud.

Retourneerwaarde

Type Beschrijving
String HTML-inhoud van het element.

Het verschil tussen innerHTML, innerText en textContent

De property innerText retourneert:

Retourneert alleen de tekstinhoud van het element en alle subelementen, zonder verborgen CSS-ruimte en tags, behalve <script> en <style>-elementen.

De property innerHTML retourneert:

Tekstinhoud van het element, inclusief alle witruimte en interne HTML-tags.

De property textContent retourneert:

Tekstinhoud van het element en alle nakomelingen, inclusief witruimte en verborgen CSS-tekst, maar zonder tags.

HTML voorbeeld

<p id="myP">   Dit element heeft extra spatting     en bevat <span>een span-element</span>.</p>

JavaScript examples

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Probeer het zelf

In het bovenstaande voorbeeld:

De property innerText retourneert:

Dit element heeft extra spatting en bevat een span-element.

De property innerHTML retourneert:

   Dit element heeft extra spatting en bevat <span>een span-element</span>.

De property textContent retourneert:

   Dit element heeft extra spatting en bevat een span-element.

Browser ondersteuning

Alle browsers ondersteunen element.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support