Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Οι ιδιότητες innerHTML και outerHTML DOM σάς επιτρέπουν να διαβάζετε και να γράφετε περιεχόμενο σε μια ιστοσελίδα. Μπορείτε να τα χρησιμοποιήσετε για να ανακτήσετε σήμανση ή να κάνετε αλλαγές σε αυτό και τα δύο είναι παρόμοια από πολλές απόψεις. Υπάρχει όμως μια σημαντική διαφορά.

Όταν εργάζεστε με το DOM, θα χρησιμοποιείτε εντελώς διαφορετικά την innerHTML και την outerHTML. Μάθετε πώς να χρησιμοποιήσετε αυτές τις δύο ιδιότητες με πρακτικά παραδείγματα.

Τι είναι το Inner HTML;

Η ιδιότητα innerHTML είναι μέρος του το DOM και μπορείτε να έχετε πρόσβαση μέσω JavaScript. Μπορείτε να το χρησιμοποιήσετε για να λάβετε ή να ορίσετε τα περιεχόμενα ενός στοιχείου. Αυτό το περιεχόμενο εξαιρεί την ετικέτα του ίδιου του στοιχείου και περιλαμβάνει μόνο τη σήμανση που αντιπροσωπεύει τα παιδιά του στοιχείου, με τη μορφή συμβολοσειράς.

instagram viewer

Εξετάστε αυτό το δείγμα κώδικα:

<html>
<σώμα>
<Πταυτότητα="myP">Είμαι μια παράγραφος.Π>


<γραφή>
έγγραφο.getElementById("myP").innerHTML = "Γειά σου Κόσμε";
γραφή>
σώμα>


html>

Στο πρόγραμμα περιήγησής σας, θα δείτε μια τυπική παράγραφο με το κείμενο αντικατάστασης, όπως:

Η ιδιότητα innerHTML επιλέγει και αλλάζει τα περιεχόμενα τουστοιχείο σε αυτό το παράδειγμα.

Τι είναι το εξωτερικό HTML;

Η ιδιότητα outerHTML μοιάζει με το innerHTML από πολλές απόψεις. Μπορείτε να το χρησιμοποιήσετε για να λάβετε ή να ορίσετε τα περιεχόμενα ενός επιλεγμένου στοιχείου. Ωστόσο, ορίζει επίσης τη σήμανση που αντιπροσωπεύει το ίδιο το στοιχείο. Αυτό περιλαμβάνει την ετικέτα ανοίγματος, τυχόν ιδιότητες και —όπου είναι σχετικό— την ετικέτα κλεισίματος.

Επισκεφτείτε ξανά το προηγούμενο παράδειγμα για να δείτε πώς διαφέρει το outerHTML:

<html>
<σώμα>
<Πταυτότητα="myP">Είμαι μια παράγραφος.Π>


<γραφή>
έγγραφο.getElementById("myP").outerHTML = "
Αυτό το Η1 αντικατέστησε μια παράγραφο.
"
γραφή>
σώμα>
html>

Στο πρόγραμμα περιήγησής σας, θα πρέπει να δείτε κάτι σαν αυτό:

Σε αυτό το παράδειγμα, η ιδιότητα outerHTML αλλάζει το Π στοιχείο σε ένα h1 στοιχείο.

Γνωρίστε τη διαφορά και πότε να χρησιμοποιήσετε αυτές τις ιδιότητες

Οι ιδιότητες innerHTML και outerHTML DOM έχουν πολλές ομοιότητες, αλλά μια βασική διαφορά. Η ιδιότητα innerHTML καταγράφει τα περιεχόμενα HTML ενός στοιχείου. Αντίθετα, η ιδιότητα outerHTML καταγράφει το HTML που αντιπροσωπεύει το ίδιο το στοιχείο και το περιεχόμενό του.

Μπορείτε να χρησιμοποιήσετε αυτές τις ιδιότητες για να διαβάσετε και να γράψετε περιεχόμενο HTML μέσω του DOM. Το DOM θα είναι μια κοινή, σημαντική ιδέα σε όλη τη διαδικασία ανάπτυξης JavaScript.