Η JavaScript είναι μια ευέλικτη γλώσσα προγραμματισμού που επιτρέπει τη δημιουργία και τον χειρισμό των στοιχείων όπως η HTML (Hyper Text Markup Language). Ακολουθεί τις μεθόδους 'append()' και 'appendChild()' για την εκτέλεση αυτής της λειτουργίας. Όπως υποδηλώνει το όνομά τους, και οι δύο μέθοδοι προσαρτούν τα στοιχεία HTML όπως τα αντικείμενα String ή Node. Ωστόσο, διαφέρουν μεταξύ τους ανάλογα με τις λειτουργίες τους και άλλους παράγοντες.
Αυτός ο οδηγός υπογραμμίζει τις βασικές διαφορές μεταξύ του jQuery ' προσαρτώ ()' και JavaScript ' appendChild ()» μεθόδους.
Πριν προχωρήσουμε στις διαφορές μεταξύ του jQuery ' προσαρτώ ()' και JavaScript ' appendChild ()», ρίξτε πρώτα μια ματιά στα βασικά αυτών των μεθόδων.
Τι είναι η μέθοδος append() jQuery;
Το jQuery ' προσαρτώ Η μέθοδος ()' εισάγει τα επιθυμητά αντικείμενα 'Node' και 'String' στο τέλος ως το τελευταίο θυγατρικό του γονικού στοιχείου.
Σύνταξη
$ ( εκλέκτορας ) . προσαρτώ ( περιεχόμενο , λειτουργία ( δείκτης , html ) )Στην παραπάνω σύνταξη:
- περιεχόμενο : Αναφέρεται στα στοιχεία HTML, στοιχεία DOM ή αντικείμενα jQuery.
- λειτουργία : Είναι μια πρόσθετη παράμετρος που καθορίζει τη συνάρτηση JavaScript που ορίζει ο χρήστης με παραμέτρους «ευρετήριο (θέση στοιχείου)» και «html (html επιλεγμένων στοιχείων)».
Τι είναι η μέθοδος appendChild() JavaScript;
Η μέθοδος 'appendChild()' προσθέτει μόνο το αντικείμενο 'Node' μετά το τελευταίο θυγατρικό του γονικού στοιχείου. Πρώτα δημιουργεί το επιθυμητό αντικείμενο Node χρησιμοποιώντας τη μέθοδο “createElement()” και στη συνέχεια το προσαρτά.
Σύνταξη
στοιχείο. appendChild ( κόμβος )Αυτή η σύνταξη απαιτεί μόνο μία παράμετρο, π.χ. κόμβος '.
Όπως υποδηλώνουν τα ονόματά τους, οι μέθοδοι που συζητήθηκαν παραπάνω είναι διαφορετικές μεταξύ τους. Αυτή η ενότητα καταγράφει ορισμένους παράγοντες στους οποίους διαφέρουν. Ας τους ρίξουμε μια ματιά.
Διαφορές μεταξύ της μεθόδου jQuery append() και JavaScript appendChild()
| Οροι | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Χρήση | Μπορεί να χρησιμοποιηθεί για την προσθήκη του γονικού στοιχείου προσθέτοντας νέο ' Κόμβος ' και ' Σειρά » αντικείμενα ταυτόχρονα. | Μπορεί να χρησιμοποιηθεί μόνο για την προσθήκη του γονικού στοιχείου από το νέο ' Κόμβος ' που δημιουργήθηκε χρησιμοποιώντας το ' ΔημιουργίαΣτοιχείου ()». |
| Αντικείμενα πολλαπλών κόμβων | Ο ' προσαρτώ ()' η μέθοδος μπορεί να προσθέσει πολλά αντικείμενα Node στο συσχετισμένο γονικό στοιχείο ταυτόχρονα με την ακόλουθη μορφή. Μορφή : 'div.append(firstchild, secondchild, 'Linuxhin');' |
Ο ' appendChild Η μέθοδος ()” λειτουργεί καλά με πολλά αντικείμενα Node, αλλά προσαρτά μόνο το πρώτο παιδί κάθε φορά και μετά το επόμενο. Μορφή : 'div.appendChild(firstchild, secondchild, 'Linuxhit');' |
| Επιστρεφόμενη Αξία | Ο ' προσαρτώ Η μέθοδος ()' δεν επιστρέφει το προσαρτημένο αντικείμενο Node καθώς εμφανίζει μια 'απροσδιόριστη' επιστρεφόμενη τιμή, π.χ. Μορφή : console.log(appendChildValue) // undefined |
Από την άλλη πλευρά, το « appendChild Η μέθοδος ()” επιστρέφει μια τιμή που περιέχει το προσαρτημένο αντικείμενο Node. Μορφή : console.log(appendChildValue) //
|
Τώρα προχωρήστε στην πρακτική εφαρμογή των αναφερόμενων βασικών διαφορών.
Διαφορά 1: Εφαρμογή των μεθόδων jQuery append() και JavaScript appendChild()
Σύμφωνα με την πρώτη διαφορά, το « προσαρτώ Η μέθοδος ()' προσαρτά τόσο τον κόμβο όσο και τη συμβολοσειρά, ενώ η μέθοδος «appendChild()» προσαρτά μόνο αντικείμενα Κόμβου.
Κώδικας HTML
Αρχικά, ρίξτε μια ματιά στον αναφερόμενο κώδικα HTML:
< σώμα >< h2 > Μέθοδος jQuery 'append()'. < / h2 > //Για προσάρτηση() < h2 > Μέθοδος jQuery 'appendChild()'. < / h2 > //Για appendChild()
< κουμπί ταυτότητα = 'btn1' στο κλικ = 'myFunc1()' > Προσθήκη συμβολοσειράς DOM < / κουμπί >
< κουμπί ταυτότητα = 'btn2' στο κλικ = 'myFunc2()' > Προσθήκη κόμβου DOM < / κουμπί >
< Π ταυτότητα = 'Για' > Αυτή είναι μια παράγραφος. < / Π >
< ol ταυτότητα = 'λίστα' >
< ότι > Οδηγός JavaScript 1 < / ότι >
< ότι > Οδηγός JavaScript 2 < / ότι >
< ότι > Οδηγός JavaScript 3 < / ότι >
< / ol >
< / σώμα >
Στις παραπάνω γραμμές κώδικα:
- Η ετικέτα '
' ορίζει την υποτίτλου του επιπέδου 2.
- Οι ετικέτες '
- Η ετικέτα '
' δημιουργεί μια κενή παράγραφο με εκχωρημένο αναγνωριστικό 'para' για να εμφανίζει την προσαρτημένη τιμή συμβολοσειράς.
- Η ετικέτα '
- ' προσθέτει μια ταξινομημένη λίστα με αναγνωριστικό 'λίστα' και τα στοιχεία που παρατίθενται με τη βοήθεια των ετικετών '
- '.
Σημείωση : Ακολουθήστε τον παραπάνω γραμμένο κώδικα HTML στην πρώτη διαφορά των μεθόδων 'append()' και 'appendChild()'.
Μέθοδος 'append()' Κώδικας jQuery
Πρώτον, επισκόπηση του κώδικα jQuery της μεθόδου 'append()':
< κεφάλι >< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' γραφή >
< γραφή >
$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( '#btn1' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( 'Π' ) . προσαρτώ ( ' Προστέθηκε συμβολοσειρά .' ) ;
} ) ;
$ ( '#btn2' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( 'ολ' ) . προσαρτώ ( '
} ) ;
} ) ;
γραφή >
κεφάλι >
Στις παραπάνω γραμμές κώδικα:
- Πρώτα, καθορίστε το jQuery ' CDN “διαδρομή από την επίσημη ιστοσελίδα της” https://jquery.com/ ' με τη βοήθεια του ' src ' Χαρακτηριστικό.
- Στη συνέχεια, προσθέστε μια μικρή ενότητα σεναρίου που χρησιμοποιεί πρώτα το ' έτοιμος ()' μέθοδος επίκλησης του αναφερόμενου ' λειτουργία ()” όταν φορτώνεται το έγγραφο HTML.
- Μετά από αυτό, το « Κάντε κλικ ()' η μέθοδος εκτελεί τη συνάρτηση που είναι συνδεδεμένη με το κουμπί του οποίου το αναγνωριστικό είναι ' btn1 'Κάντε κλικ στο κουμπί.
- Στον ορισμό της συνάρτησης, το ' προσαρτώ Η μέθοδος ()' χρησιμοποιείται για την προσθήκη του στοχευμένου στοιχείου παραγράφου με τη δηλωμένη συμβολοσειρά.
- Η ίδια διαδικασία γίνεται για το προστιθέμενο ' λίστα με παραγγελία δηλ., αντικείμενο κόμβου για να το προσαρτήσετε στο δεδομένο στοιχείο.
Παραγωγή
Εδώ, επιβεβαιώνεται ότι τόσο τα αντικείμενα 'String' και τα αντικείμενα 'Node' προσαρτώνται με τη βοήθεια της μεθόδου 'append()'.
Μέθοδος 'appendChild()' Κώδικας JavaScript
Τώρα, δείτε τη μέθοδο JavaScript 'appendChild()' πρακτικά:
< γραφή >λειτουργία myFunc1 ( ) {
Για. appendChild ( '
Προστέθηκε συμβολοσειρά
' ) //Προσθήκη συμβολοσειράς DOM} λειτουργία myFunc2 ( ) {
συνθ στοιχείο = έγγραφο. ΔημιουργίαΣτοιχείου ( 'ότι' ) ;
συνθ κόμβος = έγγραφο. createTextNode ( 'Στοιχείο που προστέθηκε' ) ;
στοιχείο. appendChild ( κόμβος ) ; //Προσθήκη κόμβου DOM
συνθ στοιχείο = έγγραφο. getElementById ( 'λίστα' ) ;
στοιχείο. appendChild ( στοιχείο ) ;
}
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Ορίστε ένα όνομα συνάρτησης ' myFunc1 ()' που χρησιμοποιεί τη μέθοδο 'appendChild()' για να προσαρτήσει την παράγραφο που προστέθηκε με τη δεδομένη συμβολοσειρά.
- Στη συνέχεια, στο « myFunc2 ()', η μέθοδος 'createElement()' δημιουργεί ένα νέο στοιχείο λίστας και στη συνέχεια προσθέτει κείμενο σε αυτό χρησιμοποιώντας τη μέθοδο 'createTextNode()'.
- Μετά από αυτό, προσθέστε τον κόμβο λίστας που δημιουργήθηκε με το κείμενό του χρησιμοποιώντας τη μέθοδο 'appendChild()'.
- Τέλος, προσθέστε τον κόμβο λίστας που δημιουργήθηκε πρόσφατα στη λίστα με την οποία έχετε πρόσβαση, το αναγνωριστικό της οποίας είναι 'list' με τη βοήθεια της μεθόδου 'appendChild()'.
Παραγωγή
Όπως φαίνεται, μόνο το αντικείμενο 'Node' προστίθεται στο κλικ του κουμπιού, όχι το 'String'.
Λάθος
Πατήστε 'F12' για να ανοίξετε την κονσόλα Ιστού και να επιθεωρήσετε το πρόβλημα:
Όπως φαίνεται, η κονσόλα εμφανίζει ένα σφάλμα κατά την προσάρτηση του αντικειμένου String χρησιμοποιώντας τη μέθοδο 'appendChild()'. Ως εκ τούτου, επιβεβαιώνεται ότι η μέθοδος 'appendChild()' δεν προσαρτά ένα αντικείμενο String.
Διαφορά 2: Εφαρμογή των μεθόδων jQuery append() και JavaScript appendChild() σε πολλαπλά αντικείμενα κόμβων
Η δεύτερη διαφορά μεταξύ των μεθόδων 'append()' και 'appendChild()' μπορεί να αναλυθεί εκτελώντας αυτές τις μεθόδους σε πολλαπλά αντικείμενα κόμβου. Για να δείτε την πρακτική εφαρμογή του, ακολουθήστε τους κωδικούς που δίνονται.
Κώδικας HTML
Ας δούμε τον κώδικα HTML:
< div ταυτότητα = 'main-div' >< div στυλ = 'display:flex; justify-content:center; align-item:center; πλάτος:50px; ύψος:50px; background:orangered; margin:10px; text-align:center;' > Ενας < / div >
< div στυλ = 'display:flex; justify-content:center; align-item:center; πλάτος:50px; ύψος:50px; background:orangered; margin:10px; text-align:center;' > Δύο < / div >
< div στυλ = 'display:flex; justify-content:center; align-item:center; πλάτος:50px; ύψος:50px; background:orangered; margin:10px; text-align:center;' > Τρία < / div >
< / div >
Εδώ, οι παραπάνω γραμμές κώδικα περιέχουν ένα κύριο στοιχείο '
Σημείωση : Ο παραπάνω γραμμένος κώδικας HTML ακολουθείται στη δεύτερη διαφορά και των δύο μεθόδων 'append()' και 'appendChild()'.
Μέθοδος append().
Τώρα, προχωρήστε με το ακόλουθο σενάριο:
< γραφή >συνθ maindiv = έγγραφο. getElementById ( 'main-div' ) ;
συνθ div4 = έγγραφο. ΔημιουργίαΣτοιχείου ( 'div' ) ;
div4. innerHTML = 'Τέσσερα' ;
div4. στυλ . χρώμα του φόντου = 'ροζ' ;
div4. classList . Προσθήκη ( 'div' ) ; συνθ div5 = έγγραφο. ΔημιουργίαΣτοιχείου ( 'div' ) ;
div5. innerHTML = 'Πέντε' ;
div5. στυλ . χρώμα του φόντου = 'ροζ' ;
div5. classList . Προσθήκη ( 'div' ) ;
maindiv. προσαρτώ ( div4 , div5 ) ;
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Η μεταβλητή 'maindiv' έχει πρόσβαση στο προστιθέμενο 'div' χρησιμοποιώντας το αναγνωριστικό της 'main-div' με τη βοήθεια της μεθόδου 'getElementById()'.
- Στη συνέχεια, η μέθοδος 'createElement()' δημιουργεί ένα νέο αντικείμενο 'div' Node, προσθέτει το καθορισμένο κείμενο χρησιμοποιώντας την ιδιότητα 'innerHTML' και εφαρμόζει το χρώμα φόντου μέσω της ιδιότητας 'style.backgroundcolor'.
- Μετά από αυτό, η μέθοδος 'add()' προσθέτει τις καθορισμένες ιδιότητες CSS κλάσης σε αυτήν χρησιμοποιώντας την ιδιότητα 'classList'.
- Η ίδια διαδικασία ακολουθείται για το επόμενο νέο στοιχείο «».
- Τέλος, και τα δύο αντικείμενα Node που δημιουργήθηκαν πρόσφατα προσαρτώνται ταυτόχρονα με τη βοήθεια της μεθόδου “append()”.
Παραγωγή
Εδώ, τα πρόσφατα δημιουργημένα πολλαπλά αντικείμενα Node προσαρτώνται στο ίδιο γονικό στοιχείο ανάλογα.
Μέθοδος 'appendChild()'.
Στη συνέχεια, συνεχίστε με τη μέθοδο 'appendChild()':
< γραφή >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
γραφή >Όπως φαίνεται, η μέθοδος 'appendChild()' προσθέτει πολλά αντικείμενα Node ένα προς ένα στο ίδιο γονικό στοιχείο.
Παραγωγή
Η έξοδος είναι ίδια με τη μέθοδο 'append()' αλλά διαφορετική στον καθορισμό των αντικειμένων του Κόμβου.
Διαφορά 3: Επιστρεφόμενη τιμή των εφαρμοσμένων μεθόδων jQuery append() και JavaScript appendChild()
Η τελευταία διαφορά είναι η 'επιστρεφόμενη τιμή' των μεθόδων 'append()' και 'appendChild()'. Ας το δούμε πρακτικά.
Σημείωση : Ο κώδικας HTML είναι ίδιος με το Difference 2 (Πολλαπλά Αντικείμενα Κόμβων).
Μέθοδος “append()”.
Κοιτάξτε τις συγκεκριμένες γραμμές κώδικα:
< γραφή >
κονσόλα. κούτσουρο ( maindiv. προσαρτώ ( div4 ) ) ;
γραφή >Εδώ, η μέθοδος 'console.log()' εφαρμόζεται για να ελέγξει την επιστρεφόμενη τιμή της μεθόδου 'append()' ενώ προσαρτάται το καθορισμένο αντικείμενο Node.
Παραγωγή
Πατήστε 'F12' για να ανοίξετε την κονσόλα Ιστού:
Όπως φαίνεται, η επιστρεφόμενη τιμή της μεθόδου 'append()' είναι ' απροσδιόριστος '.
Μέθοδος appendChild().
Τώρα, εξετάστε τον ακόλουθο κώδικα χρησιμοποιώντας τη μέθοδο 'appendChild()':
< γραφή >
κονσόλα. κούτσουρο ( maindiv. appendChild ( div4 ) ) ;
γραφή >Καθορίστε τη μέθοδο 'appendChild()' με τη μέθοδο 'console.log()' ίδια με τη μέθοδο 'append()'.
Παραγωγή
Εδώ, η έξοδος επιστρέφει το προσαρτημένο στοιχείο HTML συμπεριλαμβανομένων των ιδιοτήτων στυλ.
συμπέρασμα
Το jQuery ' προσαρτώ ()' και το JavaScript ' appendChild ()' οι μέθοδοι διαφέρουν με βάση το ' συντακτικές, «χρήση» και «πολλαπλά αντικείμενα κόμβου '. Επιπλέον, τους « επιστρεφόμενες τιμές » είναι επίσης διαφορετικά μεταξύ τους. Και οι δύο μέθοδοι είναι χρήσιμες και η χρήση τους εξαρτάται από τις επιλογές του χρήστη. Αυτός ο οδηγός απαριθμούσε τη διαφορά μεταξύ του jQuery ' προσαρτώ ()' και το JavaScript ' appendChild ()» μέθοδο πρακτικά.