Αυτό το σεμινάριο θα περιγράψει τις μεθόδους για να γράψετε κώδικα HTML δυναμικά χρησιμοποιώντας JavaScript.
Πώς να γράψετε HTML κώδικα δυναμικά χρησιμοποιώντας JavaScript;
Για να γράψετε κώδικα HTML χρησιμοποιώντας JavaScript, χρησιμοποιήστε τις ακόλουθες μεθόδους:
Μέθοδος 1: Γράψτε τον κώδικα HTML δυναμικά χρησιμοποιώντας τη μέθοδο document.createElement()
JavaScript ' document.createElement() μέθοδος με το « περιεχόμενο κειμένου Η ιδιότητα ' χρησιμοποιείται για τη δυναμική εγγραφή ενός κώδικα HTML σε JavaScript. Χρησιμοποιώντας τη μέθοδο createElement(), μπορείτε να δημιουργήσετε ένα συγκεκριμένο στοιχείο HTML και η ιδιότητα textContent χρησιμοποιείται για τον ορισμό του περιεχομένου κειμένου.
Σύνταξη
Χρησιμοποιήστε τη δεδομένη σύνταξη για να δημιουργήσετε ένα στοιχείο HTML σε JavaScript:
έγγραφο. ΔημιουργίαΣτοιχείου ( 'tagName' )
Παράδειγμα
Εδώ, πρώτα, θα δημιουργήσουμε μια παράγραφο σε ένα αρχείο JavaScript χρησιμοποιώντας την ετικέτα HTML
που έχει περάσει σε ένα ' createElement() 'μέθοδος:
συνθ κείμενο = έγγραφο. ΔημιουργίαΣτοιχείου ( 'Π' ) ;Χρησιμοποιήστε την ιδιότητα textContent για να ορίσετε το κείμενο σε μια παράγραφο:
κείμενο. περιεχόμενο κειμένου = 'Καλώς ήρθατε στο Linuxhint' ;
Τέλος, εκτυπώστε το κείμενο στην ιστοσελίδα χρησιμοποιώντας το « document.write() 'μέθοδος:
έγγραφο. γράφω ( κείμενο. περιεχόμενο κειμένου ) ;Εδώ, μπορείτε να δείτε στην έξοδο ότι γράφουμε με επιτυχία το κείμενο στην ιστοσελίδα χρησιμοποιώντας JavaScript:
Μέθοδος 2: Γράψτε τον κώδικα HTML δυναμικά χρησιμοποιώντας την ιδιότητα innerHTML
Για να γράψετε κώδικα HTML δυναμικά, χρησιμοποιήστε το JavaScript ' innerHTML ” ιδιοκτησία. Είναι η απλούστερη προσέγγιση για την αλλαγή του περιεχομένου ενός στοιχείου HTML. Υποστηρίζει όλα τα προγράμματα περιήγησης.
Σύνταξη
Ακολουθήστε τη δεδομένη σύνταξη για να χρησιμοποιήσετε την ιδιότητα innerHTML:
innerHTML = 'κείμενο'Παράδειγμα
Στο αρχείο HTML, πρώτα δημιουργήστε ένα κουμπί που θα καλέσει την καθορισμένη συνάρτηση ' επικεφαλίδα() ” σε JavaScript στο συμβάν κλικ:
< κουμπί κάνοντας κλικ = 'επικεφαλίδα()' > Κάντε κλικ ΕΔΩ κουμπί >Δημιουργήστε μια παράγραφο χρησιμοποιώντας την ετικέτα
όπου θα εμφανίζεται το κείμενο από το JavaScript και αντιστοιχίστε ένα αναγνωριστικό σε αυτό:
< p id = 'επικεφαλίδα' Π >Ορίστε μια συνάρτηση ' επικεφαλίδα() ' σε ένα αρχείο JavaScript. Λάβετε την αναφορά του στοιχείου HTML χρησιμοποιώντας το αναγνωριστικό που του έχει εκχωρηθεί με τη βοήθεια του ' getElementById() ' μέθοδος και εφαρμόστε ένα ' innerHTML ” ιδιοκτησία σε αυτό:
επικεφαλίδα λειτουργίας ( ) {έγγραφο. getElementById ( 'επικεφαλίδα' ) . innerHTML = '
Καλώς ορίσατε στο Linuxhint
' ;}
Παραγωγή
Έχουμε συγκεντρώσει όλες τις βασικές πληροφορίες που σχετίζονται με τη δυναμική σύνταξη του κώδικα HTML χρησιμοποιώντας JavaScript.
συμπέρασμα
Για να γράψετε κώδικα HTML δυναμικά σε JavaScript, χρησιμοποιήστε το ' document.createElement() μέθοδος με το « περιεχόμενο κειμένου «περιουσία ή το « innerHTML ” ιδιοκτησία. Στην πρώτη μέθοδο, δεν χρειάζεστε κώδικα HTML, ενώ στην ιδιότητα innerHTML, πρέπει να αποκτήσετε πρόσβαση στο στοιχείο HTML και να εκτελέσετε μια λειτουργία σε αυτό. Σε αυτό το σεμινάριο, περιγράψαμε τις μεθόδους για τη δυναμική σύνταξη κώδικα HTML χρησιμοποιώντας JavaScript.