Atrybut innerHTML elementu HTML DOM

Definicja i użycie

innerHTML Ustawienie lub zwracanie zawartości HTML elementu (wewnętrzny HTML).

Zobacz również:

Atrybut innerText

Atrybut textContent

Przykład

Przykład 1

Pobierz zawartość HTML elementu o id="myP":

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

Spróbuj sam

Przykład 2

Zmień zawartość HTML elementu o id="demo":

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

Spróbuj sam

Przykład 3

Pobierz zawartość HTML elementu <ul> o id="myList":

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

Spróbuj sam

Przykład 4

Usuń zawartość HTML elementu <p> o id="demo":

element.innerHTML = "";

Spróbuj sam

Przykład 5

Zmień zawartość HTML dwóch elementów:

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

Spróbuj sam

Przykład 6

Powtarzanie zawartości HTML elementu:

element.innerHTML += element.innerHTML;

Spróbuj sam

Przykład 7

Zmiana zawartości HTML i URL linku:

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

Spróbuj sam

Gramatyka

Zwróć właściwość innerHTML:

element.innerHTML

Ustawienie właściwości innerHTML:

element.innerHTML = text

Wartość atrybutu

Wartość Opis
Ciąg znaków. Zawartość HTML.

Zwracana wartość

Typ Opis
Ciąg znaków Zawartość HTML elementu.

Różnica między innerHTML, innerText a textContent

Właściwość innerText zwraca:

Zwraca tylko tekst zawarty w elemencie i wszystkich jego potomkach, bez ukrytych tekstów CSS, odstępów i etykiet, oprócz elementów <script> i <style>.

Właściwość innerHTML zwraca:

Tekst zawarty w elemencie, w tym wszystkie białe znaki i wewnętrzne etykiety HTML.

Właściwość textContent zwraca:

Tekst zawarty w elemencie i wszystkich jego potomkach, z białymi znakami i ukrytymi tekstami CSS, ale bez etykiet.

Przykład HTML

<p id="myP">   Ten element ma dodatkowe odstępy     i zawiera <span>element <span>span</span></span>.</p>

Przykłady JavaScript

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

Spróbuj sam

W powyższym przykładzie:

Właściwość innerText zwraca:

Ten element ma dodatkowe odstępy i zawiera element <span>span</span>.

Właściwość innerHTML zwraca:

   Ten element ma dodatkowe odstępy i zawiera <span>element <span>span</span></span>.

Właściwość textContent zwraca:

   Ten element ma dodatkowe odstępy i zawiera element <span>span</span>.

Obsługa przeglądarki

Wszystkie przeglądarki obsługują element.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie