HTML DOM Element innerHTML-ominaisuus

Määrittely ja käyttö

innerHTML Aseta tai palauta elementin HTML-sisältö (sisäinen HTML).

Katso myös:

innerText-ominaisuus

textContent-ominaisuus

Esimerkki

Esimerkki 1

Hae id="myP" -elementin HTML-sisältö:

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

Kokeile itse

Esimerkki 2

Muuta id="demo" -elementin HTML-sisältöä:

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

Kokeile itse

Esimerkki 3

Hae id="myList" -elementin <ul>-elementin HTML-sisältö:

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

Kokeile itse

Esimerkki 4

Poista id="demo" -päätepalkin HTML-sisältö:

element.innerHTML = "";

Kokeile itse

Esimerkki 5

Muuta kahden elementin HTML-sisältöä:

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

Kokeile itse

Esimerkki 6

Toista elementin HTML-sisältöä

element.innerHTML += element.innerHTML;

Kokeile itse

Esimerkki 7

Muuta linkin HTML-sisältöä ja URL-osoitetta:

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

Kokeile itse

Syntaksi

Palauta innerHTML-ominaisuus:

element.innerHTML

Aseta innerHTML-ominaisuus:

element.innerHTML = text

Ominaisuusarvo

Arvo Kuvaus
Merkkijono. HTML-sisältö

Palautusarvo

Tyyppi Kuvaus
Merkkijono Elementin HTML-sisältö

innerHTML, innerText ja textContent eroavat toisistaan

innerText-ominaisuus palauttaa:

Palauttaa vain elementin ja kaikkien sen jälkeläisten tekstisisällön, ei CSS:llä piilotettua tekstiä, välitilaa ja merkkejä, paitsi <script> ja <style>-elementit.

innerHTML-ominaisuus palauttaa:

Elementin tekstisisältö, mukaan lukien kaikki tyhjät välit ja sisäiset HTML-merkit.

textContent-ominaisuus palauttaa:

Elementin ja kaikkien jälkeläisten tekstisisältö, sisältäen tyhjät välit ja CSS:llä piilotetun tekstin, mutta ilman merkkejä.

HTML-esimerkki

<p id="myP">   Tämä elementti sisältää ylimääräistä välitilaa ja sisältää <span>span-elementin</span>.</p>

JavaScript-esimerkki

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

Kokeile itse

Yllä olevassa esimerkissä:

innerText-ominaisuus palauttaa:

Tämä elementti sisältää ylimääräistä välitilaa ja sisältää span-elementin.

innerHTML-ominaisuus palauttaa:

   Tämä elementti sisältää ylimääräistä välitilaa ja sisältää <span>span-elementin</span>.

textContent-ominaisuus palauttaa:

   Tämä elementti sisältää ylimääräistä välitilaa ja sisältää span-elementin.

Selaimet tukevat

Kaikki selaimet tukevat element.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki Tuki