Όλα όσα πρέπει να ξέρετε για το εσωτερικό HTML σε JavaScript

Το JavaScript είναι μια από τις πιο διαδεδομένες γλώσσες προγραμματισμού. Είναι επίσης αρκετά δημοφιλές για την ευελιξία του στις πλατφόρμες. Υπάρχουν διαφορετικές ιδιότητες στο που διευκολύνουν το έργο σας για τη δημιουργία ενός δυναμικού ιστότοπου. Σε αυτό το άρθρο, θα συζητήσουμε την Εσωτερική HTML σε JavaScript με την ακόλουθη ακολουθία:

• Εισαγωγή στη JavaScript
• Εσωτερικό HTML σε JavaScript
  • Λίστα με παραγγελία ή χωρίς ταξινόμηση
  • Αλλαγή της διεύθυνσης URL

Εισαγωγή στη JavaScript

Το JavaScript χρησιμοποιείται ως γλώσσα προγραμματισμού από την πλευρά του πελάτη καθώς και ως γλώσσα προγραμματισμού από τον διακομιστή. χρησιμοποιείται για την εκτέλεση από την πλευρά του πελάτη καθώς και από την πλευρά διακομιστή οποιασδήποτε εφαρμογής. Ένας κόμβος μπορεί επίσης να αναφέρεται ως Node.js σε πολλά μέρη.

Το JavaScript παρέχει πληθώρα μεθόδων για διάφορες λειτουργίες που μπορούν να εκτελεστούν με ευκολία. Αυτό έκανε το JavaScript μία από τις πιο δημοφιλείς γλώσσες προγραμματισμού καθώς επίσης χρησιμοποιείται ευρέως σε διάφορα είδη ανάπτυξης προϊόντων.

Εσωτερικό HTML σε JavaScript

Το εσωτερικό Η ιδιότητα σε JavaScript είναι ένα από τα πολύ εύχρηστα χαρακτηριστικά και χρησιμοποιείται ευρέως για να παρέχει μια πιο δυναμική και ευέλικτη πτυχή στις ιστοσελίδες που δημιουργούνται.

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

Μπορεί να ακούγεται λίγο δύσκολο, αλλά ας προσπαθήσουμε να το καταλάβουμε με τη βοήθεια ενός παραδείγματος.

Παράδειγμα:

 
Κάντε κλικ εδώ για να αλλάξετε το εσωτερικό κείμενο HTML.
function myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Η παράγραφος άλλαξε!' }

Εδώ στον παραπάνω κώδικα, στην ετικέτα παραγράφου το αναγνωριστικό του είναι η παράγραφος 1.

Υπάρχει ένα λειτουργία ονομάστηκε myfunction () που θα ανακληθεί με το κλικ στο κείμενο 'Κάντε κλικ εδώ για να αλλάξετε το κείμενο του εσωτερικού HTML'.Όταν η συνάρτηση ανακαλείται με το κλικ, εκτελείται η συνάρτηση που αναφέρει getElementById («παράγραφος 1»), η οποία δήλωσε ότι το στοιχείο με το Id ως επίδειξη πρέπει να επιλεγεί.

Επιπλέον, έχουμε τη λειτουργία innerHTML που σημαίνει απλά μετά το onclick τι πρέπει να γίνει. Εδώ στο παραπάνω παράδειγμα, είναι απλώς «Αλλαγή παραγράφου».

Παρακάτω είναι η αρχική έξοδος του παραπάνω κώδικα.

system.exit (0)

Παρακάτω είναι η αλλαγμένη έξοδος μετά το κλικ.

Εσωτερικό HTML με λίστα ταξινομημένη ή χωρίς παραγγελία

Ακολουθεί ένα παράδειγμα για να δείξετε τη χρήση του internalHTML με λίστα ταξινομημένη ή χωρίς ταξινόμηση.

Παράδειγμα:

 
 
Χαίρετε
 
Γεια σου και πάλι
 
 
Κάντε κλικ στο παρακάτω κουμπί για να λάβετε το περιεχόμενο του στοιχείου ul.
Δοκιμάστε το να λειτουργήσει helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}

Εδώ το innerHTML ενεργοποιείται από το κουμπί που ορίζεται από το όνομα 'Δοκιμάστε το'.

Η αρχική έξοδος του παραπάνω κειμένου είναι:

Η έξοδος μετά το κλικ στο κουμπί. Το κλικ στο κουμπί δεν οδηγεί σε επαναφόρτωση της σελίδας αλλά αντ 'αυτού οφείλεται στη χρήση του εσωτερικού HTML.

τι είναι τα πακέτα σε Java

InnerHTML για αλλαγή της διεύθυνσης URL

Ακολουθεί ένα άλλο παράδειγμα που δείχνει τη χρήση του internalHTML για την αλλαγή της διεύθυνσης URL στο κουμπί κλικ.

Παράδειγμα:

  Βικιπαίδεια Αλλαγή λειτουργίας σύνδεσης myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor') ) .target = '_blank'}

Το παραπάνω παράδειγμα αρχικά δίνει τον σύνδεσμο προς τον ιστότοπο της Wikipedia, αλλά όταν πατηθεί το κουμπί, ο σύνδεσμος αλλάζει στο Google.

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

Δείτε το από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3).

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του 'String Concatenation in JavaScript' και θα επικοινωνήσουμε μαζί σας.