Πρότυπο HTML DOM Element innerHTML

Ορισμός και χρήση

innerHTML Ρύθμιση ή επιστροφή του περιεχομένου HTML του στοιχείου (εσωτερικό HTML).

Δείτε επίσης:

είδος κειμένου

είδος κειμένου

παράδειγμα

παράδειγμα 1

Αποκάλυψη του περιεχομένου HTML του στοιχείου με id="myP":

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

Δοκιμάστε το προσωπικά

παράδειγμα 2

Αλλαγή του περιεχομένου HTML του στοιχείου με id="demo":

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

Δοκιμάστε το προσωπικά

παράδειγμα 3

Αποκάλυψη του περιεχομένου HTML του στοιχείου <ul> με id="myList":

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

Δοκιμάστε το προσωπικά

παράδειγμα 4

Διαγραφή του περιεχομένου HTML του στοιχείου <p> με id="demo":

element.innerHTML = "";

Δοκιμάστε το προσωπικά

παράδειγμα 5

Αλλαγή του περιεχομένου HTML δύο στοιχείων:

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

Δοκιμάστε το προσωπικά

παράδειγμα 6

Επανάληψη του HTML περιεχομένου του στοιχείου

element.innerHTML += element.innerHTML;

Δοκιμάστε το προσωπικά

Παράδειγμα 7

Αλλαγή του HTML περιεχομένου και της URL του δεσμού

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

Δοκιμάστε το προσωπικά

Γλώσσα

Επιστροφή της ιδιότητας innerHTML:

στοιχείο.innerHTML

Ρύθμιση της ιδιότητας innerHTML:

στοιχείο.innerHTML = text

Αξία ιδιότητας

Τιμή Περιγραφή
String. HTML περιεχόμενο

Επιστροφή τιμή

Τύπος Περιγραφή
String Το HTML περιεχόμενο του στοιχείου

Η διαφορά μεταξύ innerHTML, innerText και textContent

Η ιδιότητα innerText επιστρέφει:

Επιστρέφει μόνο τον κείμενο περιεχόμενο του στοιχείου και όλων των υποστοιχείων του, χωρίς κρυμμένο κείμενο CSS και ετικέτες, εκτός από τα στοιχεία <script> και <style>.

Η ιδιότητα innerHTML επιστρέφει:

Ο κείμενος περιεχόμενος του στοιχείου, συμπεριλαμβανομένων όλων των κενών και των εσωτερικών ετικετών HTML.

Η ιδιότητα textContent επιστρέφει:

Ο κείμενος περιεχόμενος των στοιχείων και όλων των απογόνων τους, με κενά και κρυμμένο κείμενο CSS, αλλά χωρίς ετικέτες.

Παράδειγμα HTML

<p id="myP">   Το στοιχείο αυτό έχει επιπλέον χώρο     και περιέχει <span>ένα στοιχείο span</span>.</p>

Παράδειγμα JavaScript

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

Δοκιμάστε το προσωπικά

Στο παρακάτω παράδειγμα:

Η ιδιότητα innerText επιστρέφει:

Το στοιχείο αυτό έχει επιπλέον χώρο και περιέχει ένα στοιχείο span.

Η ιδιότητα innerHTML επιστρέφει:

   Το στοιχείο αυτό έχει επιπλέον χώρο και περιέχει <span>ένα στοιχείο span</span>.

Η ιδιότητα textContent επιστρέφει:

   Το στοιχείο αυτό έχει επιπλέον χώρο και περιέχει στοιχείο span.

Υποστήριξη περιηγητή

Όλοι οι περιηγητές υποστηρίζουν element.innerHTML：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη