JavaScript is een veelzijdige programmeertaal waarmee elementen kunnen worden gemaakt en gemanipuleerd, net als HTML (Hyper Text Markup Language). Het volgt de methoden 'append()' en 'appendChild()' om deze functionaliteit uit te voeren. Zoals hun naam al doet vermoeden, voegen beide methoden de HTML-elementen toe, zoals String- of Node-objecten. Ze verschillen echter van elkaar, afhankelijk van hun functionaliteiten en andere factoren.
Deze gids onderstreept de belangrijkste verschillen tussen de jQuery “ toevoegen ()' en javascript ' appendKind ()” methoden.
Voordat we verder gaan met de verschillen tussen de jQuery “ toevoegen ()' en javascript ' appendKind ()” methoden, kijk dan eerst eens naar de basis van deze methoden.
Wat is de jQuery append()-methode?
De jQuery ' toevoegen ()'-methode voegt de gewenste 'Node'- en 'String'-objecten aan het einde in als het laatste kind van het bovenliggende element.
Syntaxis
$ ( kiezer ) . toevoegen ( inhoud , functie ( inhoudsopgave , html ) )In de bovenstaande syntaxis:
- inhoud : Het verwijst naar de HTML-elementen, DOM-elementen of jQuery-objecten.
- functie : Het is een aanvullende parameter die de door de gebruiker gedefinieerde JavaScript-functie specificeert met de parameters 'index (elementpositie)' en 'html (html van geselecteerde elementen)'.
Wat is de JavaScript appendChild()-methode?
De methode 'appendChild()' voegt alleen het object 'Node' toe na het laatste kind van het bovenliggende element. Het maakt eerst het gewenste Node-object met behulp van de methode 'createElement()' en voegt het vervolgens toe.
Syntaxis
element. appendKind ( knooppunt )Deze syntaxis vereist slechts één parameter, d.w.z. ' knooppunt ”.
Zoals hun namen suggereren, verschillen de hierboven besproken methoden van elkaar. In dit gedeelte worden enkele factoren uitgezocht waarop ze verschillen. Laten we ze eens bekijken.
Verschillen tussen de methode jQuery append() en JavaScript appendChild().
| Voorwaarden | jQuery toevoegen() | JavaScript appendChild() |
|---|---|---|
| Gebruik | Het kan worden gebruikt om het bovenliggende element toe te voegen door nieuwe ' Knooppunt ' En ' Snaar 'objecten tegelijkertijd. | Het kan alleen worden gebruikt om het bovenliggende element toe te voegen door de nieuwe ' Knooppunt ' gemaakt met behulp van de ' createElement ()”-methode. |
| Meerdere knooppuntobjecten | De ' toevoegen ()'-methode kan tegelijkertijd meerdere Node-objecten in het bijbehorende bovenliggende element toevoegen in de volgende indeling. Formaat : 'div.append(eerste kind, tweede kind, 'Linuxhint');' |
De ' appendKind ()'-methode werkt prima met meerdere Node-objecten, maar voegt alleen het eerste kind tegelijk toe en vervolgens het volgende. Formaat : 'div.appendChild(eerste kind, tweede kind, 'Linuxhint');' |
| Winstwaarde | De ' toevoegen ()'-methode retourneert het toegevoegde Node-object niet, omdat het een 'niet-gedefinieerde' geretourneerde waarde toont, d.w.z. Formaat : console.log(appendChildValue) // ongedefinieerd |
Aan de andere kant, de “ appendKind ()'-methode retourneert een waarde die het toegevoegde Node-object bevat. Formaat : console.log(appendChildValue) //
|
Ga nu verder met de praktische implementatie van de vermelde belangrijkste verschillen.
Verschil 1: toepassing van de methoden jQuery append() en JavaScript appendChild().
Volgens het eerste verschil, de ' toevoegen ()'-methode voegt zowel Node als String toe, terwijl de 'appendChild()'-methode alleen Node-objecten toevoegt.
HTML code
Bekijk eerst de vermelde HTML-code:
< lichaam >< h2 > jQuery 'append()'-methode < / h2 > //Voor toevoegen() < h2 > jQuery 'appendChild()'-methode < / h2 > //Voor appendChild()
< knop ID kaart = 'btn1' bij klikken = 'mijnFunc1()' > DOM-tekenreeks toevoegen < / knop >
< knop ID kaart = 'btn2' bij klikken = 'mijnFunc2()' > DOM-knooppunt toevoegen < / knop >
< P ID kaart = 'voor' > Dit is een alinea. < / P >
< ol ID kaart = 'lijst' >
< Dat > JavaScript-zelfstudie 1 < / Dat >
< Dat > JavaScript-zelfstudie 2 < / Dat >
< Dat > JavaScript-zelfstudie 3 < / Dat >
< / ol >
< / lichaam >
In de bovenstaande coderegels:
- De tag '
' definieert de subkop van niveau 2.
- De '
- De tag '
' maakt een lege alinea met een toegewezen id 'para' om de toegevoegde tekenreekswaarde weer te geven.
- De “
- ” tag voegt een geordende lijst toe met een id “list”, en de vermelde items met behulp van de “
- ” tags.
Opmerking : Volg de hierboven geschreven HTML-code in het eerste verschil van zowel de methode 'append()' als 'appendChild()'.
'append()' Methode jQuery-code
Ten eerste, overzicht van de “append()” methode jQuery code:
< hoofd >< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > script >
< script >
$ ( document ) . klaar ( functie ( ) {
$ ( '#btn1' ) . Klik ( functie ( ) {
$ ( 'P' ) . toevoegen ( ' Toegevoegde tekenreeks .' ) ;
} ) ;
$ ( '#btn2' ) . Klik ( functie ( ) {
$ ( 'ol' ) . toevoegen ( '
} ) ;
} ) ;
script >
hoofd >
In de bovenstaande coderegels:
- Specificeer eerst de jQuery ' CDN ' pad van de officiële website ' https://jquery.com/ ” met behulp van de “ src ” attribuut.
- Voeg vervolgens een kleine scriptsectie toe die eerst de ' klaar ()” methode om de vermelde “ functie ()' wanneer het HTML-document wordt geladen.
- Daarna is de “ Klik ()'-methode voert de functie uit die is gekoppeld aan de knop waarvan de id ' btn1 ” bij het klikken op de knop.
- In de functiedefinitie, de ' toevoegen ()”-methode wordt gebruikt om het gerichte alinea-element toe te voegen met de aangegeven tekenreeks.
- Hetzelfde proces wordt uitgevoerd voor de toegevoegde ' bestelde lijst ”d.w.z. Node-object om het aan het gegeven item toe te voegen.
Uitgang
Hier wordt bevestigd dat zowel de 'String'- als de 'Node'-objecten worden toegevoegd met behulp van de 'append()'-methode.
'appendChild()' Methode JavaScript-code
Kijk nu eens praktisch naar de JavaScript-methode 'appendChild()':
< script >functie mijnFunc1 ( ) {
voor. appendKind ( '
Toegevoegde tekenreeks
' ) // DOM-tekenreeks toevoegen} functie mijnFunc2 ( ) {
const element = document. createElement ( 'Dat' ) ;
const knooppunt = document. createTextNode ( 'Bijgevoegd item' ) ;
element. appendKind ( knooppunt ) ; // DOM-knooppunt toevoegen
const element = document. getElementById ( 'lijst' ) ;
element. appendKind ( element ) ;
}
script >
In het bovenstaande codefragment:
- Definieer een functienaam ' mijnFunc1 ()' die de methode 'appendChild()' gebruikt om de toegevoegde alinea met de opgegeven tekenreeks toe te voegen.
- Vervolgens in de ' mijnFunc2 ()', maakt de methode 'createElement()' een nieuw lijstelement en voegt er vervolgens wat tekst aan toe met behulp van de methode 'createTextNode()'.
- Voeg daarna het gemaakte lijstknooppunt met zijn tekst toe met behulp van de methode 'appendChild()'.
- Voeg ten slotte het nieuw gemaakte lijstknooppunt toe aan de geopende geordende lijst waarvan de id 'lijst' is met behulp van de methode 'appendChild()'.
Uitgang
Zoals te zien is, wordt alleen het 'Node' -object toegevoegd bij het klikken op de knop, niet de 'String'.
Fout
Druk op 'F12' om de webconsole te openen en het probleem te inspecteren:
Zoals te zien is, geeft de console een fout weer bij het toevoegen van het String-object met de methode 'appendChild()'. Daarom wordt bevestigd dat de methode 'appendChild()' geen String-object toevoegt.
Verschil 2: de methodes jQuery append() en JavaScript appendChild() toepassen op meerdere knooppuntobjecten
Het tweede verschil tussen de methoden 'append()' en 'appendChild()' kan worden geanalyseerd door deze methoden uit te voeren op meerdere knooppuntobjecten. Volg de gegeven codes om de praktische implementatie ervan te zien.
HTML code
Laten we de HTML-code doornemen:
< div ID kaart = 'main-div' >< div stijl = 'weergave:flex; rechtvaardigen-inhoud:centrum; align-items:centrum; breedte:50px; hoogte:50px; achtergrond:oranje; marge:10px; tekst-uitlijning:centrum;' > Een < / div >
< div stijl = 'weergave:flex; rechtvaardigen-inhoud:centrum; align-items:centrum; breedte:50px; hoogte:50px; achtergrond:oranje; marge:10px; tekst-uitlijning:centrum;' > Twee < / div >
< div stijl = 'weergave:flex; rechtvaardigen-inhoud:centrum; align-items:centrum; breedte:50px; hoogte:50px; achtergrond:oranje; marge:10px; tekst-uitlijning:centrum;' > Drie < / div >
< / div >
Hier bevatten de bovenstaande coderegels een hoofdelement '
Opmerking : De hierboven geschreven HTML-code wordt gevolgd in het tweede verschil tussen zowel de methode 'append()' als 'appendChild()'.
append() Methode
Ga nu verder met het volgende script:
< script >const hoofddiv = document. getElementById ( 'main-div' ) ;
const div4 = document. createElement ( 'div' ) ;
div4. binnenHTML = 'Vier' ;
div4. stijl . Achtergrond kleur = 'roze' ;
div4. classLijst . toevoegen ( 'div' ) ; const div5 = document. createElement ( 'div' ) ;
div5. binnenHTML = 'Vijf' ;
div5. stijl . Achtergrond kleur = 'roze' ;
div5. classLijst . toevoegen ( 'div' ) ;
hoofddiv. toevoegen ( div4 , div5 ) ;
script >
In het bovenstaande codefragment:
- De variabele 'maindiv' heeft toegang tot de toegevoegde 'div' met behulp van zijn id 'main-div' met behulp van de methode 'getElementById()'.
- Vervolgens maakt de methode 'createElement()' een nieuw 'div' Node-object, voegt de opgegeven tekst toe met behulp van de eigenschap 'innerHTML' en past de achtergrondkleur toe via de eigenschap 'style.backgroundcolor'.
- Daarna voegt de methode 'add()' de opgegeven CSS-klasse-eigenschappen eraan toe met behulp van de eigenschap 'classList'.
- Dezelfde procedure wordt gevolgd voor het volgende nieuw gecreëerde “” element.
- Ten slotte worden beide nieuw gemaakte Node-objecten tegelijkertijd toegevoegd met behulp van de methode 'append()'.
Uitgang
Hier worden de nieuw gemaakte meerdere Node-objecten overeenkomstig aan hetzelfde bovenliggende element toegevoegd.
'appendChild()'-methode
Ga vervolgens verder met de methode 'appendChild()':
< script >
hoofddiv. appendKind ( div4 ) ;
hoofddiv. appendKind ( div5 ) ;
script >Zoals te zien is, voegt de methode 'appendChild()' meerdere Node-objecten één voor één toe aan hetzelfde bovenliggende element.
Uitgang
De uitvoer is hetzelfde als de methode 'append()', maar verschilt in het specificeren van de Node-objecten.
Verschil 3: Retourwaarde van de Applied jQuery append() en JavaScript appendChild() Methoden
Het laatste verschil is de 'geretourneerde waarde' van de methoden 'append()' en 'appendChild()'. Laten we het praktisch bekijken.
Opmerking : De HTML-code is hetzelfde als de Difference 2 (Multiple Node Objects).
'toevoegen()' methode
Kijk naar de gegeven regels code:
< script >
troosten. loggen ( hoofddiv. toevoegen ( div4 ) ) ;
script >Hier wordt de methode 'console.log()' toegepast om de geretourneerde waarde van de methode 'append()' te controleren tijdens het toevoegen van het opgegeven Node-object.
Uitgang
Druk op 'F12' om de webconsole te openen:
Zoals te zien is, is de geretourneerde waarde van de methode 'append()' ' ongedefinieerd ”.
appendChild() Methode
Overweeg nu de volgende code met behulp van de methode 'appendChild()':
< script >
troosten. loggen ( hoofddiv. appendKind ( div4 ) ) ;
script >Geef de methode 'appendChild()' op met de methode 'console.log()' op dezelfde manier als de methode 'append()'.
Uitgang
Hier retourneert de uitvoer in plaats daarvan het toegevoegde element HTML inclusief de stylingeigenschappen.
Conclusie
De jQuery ' toevoegen ()' en het JavaScript ' appendKind ()' methoden verschillen op basis van hun ' syntaxis', 'gebruik' en 'meerdere Node-objecten ”. Bovendien is hun “ geretourneerde waarden ' verschillen ook van elkaar. Beide methoden zijn nuttig en het gebruik ervan hangt af van de keuzes van de gebruiker. Deze gids somde het verschil op tussen de jQuery ' toevoegen ()' en het JavaScript ' appendKind ()”-methode praktisch.