HTML DOM Element innerHTML-egenskaben

DefinITION OG BRUG

innerHTML Egenskaben sætter eller returnerer elementets HTML-indhold (internt HTML).

Se også:

innerText-egenskaben

textContent-egenskaben

Eksempel

Eksempel 1

Hent HTML-indholdet for elementet med id="myP":

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

Prøv det selv

Eksempel 2

Ændr HTML-indholdet for elementet med id="demo":

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

Prøv det selv

Eksempel 3

Hent HTML-indholdet for <ul>-elementet med id="myList":

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

Prøv det selv

Eksempel 4

Fjern HTML-indholdet for <p>-elementet med id="demo":

element.innerHTML = "";

Prøv det selv

Eksempel 5

Ændr HTML-indholdet for to elementer:

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

Prøv det selv

Eksempel 6

Gentag elements HTML-indhold

element.innerHTML += element.innerHTML;

Prøv det selv

Eksempel 7

Ændr links HTML-indhold og URL

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

Prøv det selv

Syntaks

Returner innerHTML-egenskaben:

element.innerHTML

Indstil innerHTML-egenskaben:

element.innerHTML = text

Egenskabsværdi

Værdi Beskrivelse
Streng. HTML-indhold

Returværdi

Type Beskrivelse
Streng Elements HTML-indhold

Forskellen mellem innerHTML, innerText og textContent

innerText-egenskaben returnerer:

Returnerer kun tekstindholdet for elementet og alle dets underelementer, uden CSS skjult tekst mellemrum og mærker, med undtagelse af <script> og <style> elementer.

innerHTML-egenskaben returnerer:

Elements tekstindhold, herunder alle mellemrum og interne HTML mærker.

textContent-egenskaben returnerer:

Elements og alle efterkommende tekstindhold, med mellemrum og CSS skjult tekst, men uden mærker.

HTML eksempel

<p id="myP">   Dette element har ekstra afstand     og indeholder <span>et span-element</span>.</p>

JavaScript eksempler

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

Prøv det selv

I ovenstående eksempel:

innerText-egenskaben returnerer:

Dette element har ekstra afstand og indeholder et span-element.

innerHTML-egenskaben returnerer:

   Dette element har ekstra afstand og indeholder <span>et span-element</span>.

textContent-egenskaben returnerer:

   Dette elementet har ekstra afstand og indeholder et <span>span-element</span>.

Browsere understøtter

Alle browsere understøtter element.innerHTML：

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