JavaScript ist eine vielseitige Programmiersprache, die die Erstellung und Bearbeitung von Elementen wie HTML (Hyper Text Markup Language) ermöglicht. Es folgt den Methoden „append()“ und „appendChild()“, um diese Funktionalität auszuführen. Wie der Name schon sagt, hängen beide Methoden die HTML-Elemente wie String- oder Node-Objekte an. Sie unterscheiden sich jedoch aufgrund ihrer Funktionalitäten und anderer Faktoren voneinander.
Dieser Leitfaden unterstreicht die wichtigsten Unterschiede zwischen der jQuery „ anhängen ()“ und JavaScript „ appendChild ()“-Methoden.
Bevor wir zu den Unterschieden zwischen jQuery übergehen „ anhängen ()“ und JavaScript „ appendChild ()“-Methoden werfen wir zunächst einen Blick auf die Grundlagen dieser Methoden.
Was ist die jQuery-Append()-Methode?
Die jQuery „ anhängen ()“-Methode fügt am Ende die gewünschten „Node“- und „String“-Objekte als letztes untergeordnetes Element des übergeordneten Elements ein.
Syntax
$ ( Wähler ) . anhängen ( Inhalt , Funktion ( Index , html ) )In der obigen Syntax:
- Inhalt : Es bezieht sich auf die HTML-Elemente, DOM-Elemente oder jQuery-Objekte.
- Funktion : Es handelt sich um einen zusätzlichen Parameter, der die benutzerdefinierte JavaScript-Funktion mit den Parametern „index (Elementposition)“ und „html (html der ausgewählten Elemente)“ angibt.
Was ist die JavaScript-Methode appendChild()?
Die Methode „appendChild()“ fügt das „Node“-Objekt erst nach dem letzten untergeordneten Element des übergeordneten Elements hinzu. Es erstellt zunächst das gewünschte Node-Objekt mit der Methode „createElement()“ und hängt es dann an.
Syntax
Element. appendChild ( Knoten )Diese Syntax erfordert nur einen Parameter, nämlich „ Knoten “.
Wie der Name schon sagt, unterscheiden sich die oben besprochenen Methoden voneinander. In diesem Abschnitt werden einige Faktoren erläutert, bei denen sie unterschiedlich sind. Werfen wir einen Blick darauf.
Unterschiede zwischen der jQuery-Methode append() und der JavaScript-Methode appendChild()
| Bedingungen | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Verwendung | Es kann verwendet werden, um das übergeordnete Element anzuhängen, indem ein neues „ Knoten ' Und ' Zeichenfolge ” Objekte gleichzeitig. | Es kann nur zum Anhängen des übergeordneten Elements durch das neue „“ verwendet werden. Knoten ” erstellt mit der „ createElement ()' Methode. |
| Mehrere Knotenobjekte | Der ' anhängen ()“-Methode kann mehrere Node-Objekte gleichzeitig in ihrem zugehörigen übergeordneten Element im folgenden Format hinzufügen. Format : „div.append(firstchild, secondchild, ‚Linuxhint‘);“ |
Der ' appendChild ()“-Methode funktioniert gut mit mehreren Node-Objekten, hängt jedoch jeweils nur das erste untergeordnete Objekt und dann das nächste an. Format : „div.appendChild(firstchild, secondchild, ‚Linuxhint‘);“ |
| Rückgabewert | Der ' anhängen ()“-Methode gibt das angehängte Node-Objekt nicht zurück, da sie einen „undefinierten“ zurückgegebenen Wert anzeigt, d. h. Format : console.log(appendChildValue) // undefiniert |
Andererseits ist die „ appendChild ()“-Methode gibt einen Wert zurück, der das angehängte Node-Objekt enthält. Format : console.log(appendChildValue) //
|
Fahren Sie nun mit der praktischen Umsetzung der aufgeführten Hauptunterschiede fort.
Unterschied 1: Anwenden der jQuery-Methoden append() und JavaScript appendChild()
Gemäß dem ersten Unterschied ist das „ anhängen ()“-Methode hängt sowohl Node als auch String an, während die „appendChild()“-Methode nur Node-Objekte anhängt.
HTML Quelltext
Schauen Sie sich zunächst den angegebenen HTML-Code an:
< Körper >< h2 > jQuery-Methode „append()“. < / h2 > //Für append() < h2 > jQuery-Methode „appendChild()“. < / h2 > //Für appendChild()
< Taste Ausweis = „btn1“ onclick = „myFunc1()“ > DOM-String anhängen < / Taste >
< Taste Ausweis = „btn2“ onclick = „myFunc2()“ > DOM-Knoten anhängen < / Taste >
< P Ausweis = 'für' > Das ist ein Absatz. < / P >
< ol Ausweis = 'Liste' >
< Das > JavaScript-Tutorial 1 < / Das >
< Das > JavaScript-Tutorial 2 < / Das >
< Das > JavaScript-Tutorial 3 < / Das >
< / ol >
< / Körper >
In den obigen Codezeilen:
- Der Tag „
“ definiert die Unterüberschrift der Ebene 2.
- Die „
- Das Tag „
“ erstellt einen leeren Absatz mit der zugewiesenen ID „para“, um den angehängten Zeichenfolgenwert anzuzeigen.
- Das „
- “-Tag fügt eine geordnete Liste mit der ID „list“ und die aufgelisteten Elemente mit Hilfe der „
- “-Tags hinzu.
Notiz : Befolgen Sie den oben geschriebenen HTML-Code im ersten Unterschied zwischen den Methoden „append()“ und „appendChild()“.
„append()“-Methode jQuery-Code
Zunächst ein Überblick über den jQuery-Code der Methode „append()“:
< Kopf >< Skript-Quelle = „https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js“ > Skript >
< Skript >
$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( „#btn1“ ) . klicken ( Funktion ( ) {
$ ( 'P' ) . anhängen ( „ Angehängte Zeichenfolge .“ ) ;
} ) ;
$ ( „#btn2“ ) . klicken ( Funktion ( ) {
$ ( „ol“ ) . anhängen ( „
} ) ;
} ) ;
Skript >
Kopf >
In den obigen Codezeilen:
- Geben Sie zunächst die jQuery „ CDN „Pfad von seiner offiziellen Website“ https://jquery.com/ ” mit Hilfe der „ src ” Attribut.
- Fügen Sie als Nächstes einen kleinen Skriptabschnitt hinzu, der zunächst das „ bereit ()“-Methode zum Aufrufen der angegebenen „ Funktion ()“, wenn das HTML-Dokument geladen wird.
- Danach wird das „ klicken ()“-Methode führt die Funktion aus, die mit der Schaltfläche verknüpft ist, deren ID „ btn1 ” beim Klicken auf die Schaltfläche.
- In der Funktionsdefinition ist das „ anhängen ()“-Methode wird verwendet, um das Zielabsatzelement mit der angegebenen Zeichenfolge anzuhängen.
- Der gleiche Vorgang wird für das hinzugefügte „“ durchgeführt. Bestellliste ” d. h. ein Knotenobjekt, um es an das angegebene Element anzuhängen.
Ausgang
Hier wird bestätigt, dass sowohl das „String“- als auch das „Node“-Objekt mit Hilfe der „append()“-Methode angehängt wird.
JavaScript-Code der Methode „appendChild()“.
Schauen Sie sich nun die JavaScript-Methode „appendChild()“ praktisch an:
< Skript >Funktion myFunc1 ( ) {
für. appendChild ( „
Angehängte Zeichenfolge
“ ) //DOM-String anhängen} Funktion myFunc2 ( ) {
const Element = dokumentieren. createElement ( 'Das' ) ;
const Knoten = dokumentieren. createTextNode ( „Angehängtes Element“ ) ;
Element. appendChild ( Knoten ) ; //DOM-Knoten anhängen
const Element = dokumentieren. getElementById ( 'Liste' ) ;
Element. appendChild ( Element ) ;
}
Skript >
Im obigen Codeausschnitt:
- Definieren Sie einen Funktionsnamen „ myFunc1 ()“, die die Methode „appendChild()“ verwendet, um den hinzugefügten Absatz mit der angegebenen Zeichenfolge anzuhängen.
- Als nächstes im „ myFunc2 ()“ erstellt die Methode „createElement()“ ein neues Listenelement und fügt ihm dann mithilfe der Methode „createTextNode()“ Text hinzu.
- Hängen Sie anschließend den erstellten Listenknoten mit seinem Text mithilfe der Methode „appendChild()“ an.
- Hängen Sie abschließend den neu erstellten Listenknoten mit Hilfe der Methode „appendChild()“ an die aufgerufene geordnete Liste an, deren ID „list“ lautet.
Ausgang
Wie zu sehen ist, wird beim Klicken auf die Schaltfläche nur das Objekt „Node“ angehängt, nicht der „String“.
Fehler
Drücken Sie „F12“, um die Webkonsole zu öffnen und das Problem zu untersuchen:
Wie Sie sehen, zeigt die Konsole beim Anhängen des String-Objekts mit der Methode „appendChild()“ einen Fehler an. Somit wird bestätigt, dass die Methode „appendChild()“ kein String-Objekt anhängt.
Unterschied 2: Anwenden der jQuery-Methoden append() und JavaScript appendChild() auf mehrere Knotenobjekte
Der zweite Unterschied zwischen den Methoden „append()“ und „appendChild()“ kann analysiert werden, indem diese Methoden auf mehrere Knotenobjekte angewendet werden. Um die praktische Umsetzung zu sehen, befolgen Sie die angegebenen Codes.
HTML Quelltext
Gehen wir den HTML-Code durch:
< div Ausweis = „Hauptdiv“ >< div Stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Eins < / div >
< div Stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Zwei < / div >
< div Stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Drei < / div >
< / div >
Hier enthalten die obigen Codezeilen ein Hauptelement „
Notiz : Der oben geschriebene HTML-Code folgt im zweiten Unterschied der Methoden „append()“ und „appendChild()“.
append() Methode
Fahren Sie nun mit dem folgenden Skript fort:
< Skript >const Hauptdiv = dokumentieren. getElementById ( „Hauptdiv“ ) ;
const div4 = dokumentieren. createElement ( „div“ ) ;
div4. innerHTML = „Vier“ ;
div4. Stil . Hintergrundfarbe = 'Rosa' ;
div4. Klassenliste . hinzufügen ( „div“ ) ; const div5 = dokumentieren. createElement ( „div“ ) ;
div5. innerHTML = 'Fünf' ;
div5. Stil . Hintergrundfarbe = 'Rosa' ;
div5. Klassenliste . hinzufügen ( „div“ ) ;
Hauptdiv. anhängen ( div4 , div5 ) ;
Skript >
Im obigen Codeausschnitt:
- Die Variable „maindiv“ greift mit Hilfe der Methode „getElementById()“ über ihre ID „main-div“ auf das hinzugefügte „div“ zu.
- Als nächstes erstellt die Methode „createElement()“ ein neues „div“-Knotenobjekt, fügt den angegebenen Text mithilfe der Eigenschaft „innerHTML“ hinzu und wendet die Hintergrundfarbe über die Eigenschaft „style.backgroundcolor“ an.
- Danach fügt die Methode „add()“ mithilfe der Eigenschaft „classList“ die angegebenen Klassen-CSS-Eigenschaften hinzu.
- Für das nächste neu erstellte „“-Element wird genauso verfahren.
- Zuletzt werden mit Hilfe der Methode „append()“ beide neu erstellten Node-Objekte gleichzeitig angehängt.
Ausgang
Hier werden die neu erstellten mehreren Node-Objekte entsprechend an dasselbe übergeordnete Element angehängt.
„appendChild()“-Methode
Fahren Sie als Nächstes mit der Methode „appendChild()“ fort:
< Skript >
Hauptdiv. appendChild ( div4 ) ;
Hauptdiv. appendChild ( div5 ) ;
Skript >Wie zu sehen ist, fügt die Methode „appendChild()“ mehrere Node-Objekte nacheinander zum selben übergeordneten Element hinzu.
Ausgang
Die Ausgabe ist die gleiche wie bei der Methode „append()“, unterscheidet sich jedoch in der Angabe der Node-Objekte.
Unterschied 3: Rückgabewert der angewandten jQuery-Methoden append() und JavaScript appendChild()
Der letzte Unterschied ist der „zurückgegebene Wert“ der Methoden „append()“ und „appendChild()“. Schauen wir es uns praktisch an.
Notiz : Der HTML-Code ist derselbe wie der Unterschied 2 (Mehrere Knotenobjekte).
„append()“-Methode
Schauen Sie sich die angegebenen Codezeilen an:
< Skript >
Konsole. Protokoll ( Hauptdiv. anhängen ( div4 ) ) ;
Skript >Hier wird die Methode „console.log()“ angewendet, um den zurückgegebenen Wert der Methode „append()“ beim Anhängen des angegebenen Node-Objekts zu überprüfen.
Ausgang
Drücken Sie „F12“, um die Webkonsole zu öffnen:
Wie Sie sehen, ist der zurückgegebene Wert der Methode „append()“ „ nicht definiert “.
appendChild()-Methode
Betrachten Sie nun den folgenden Code, der die Methode „appendChild()“ verwendet:
< Skript >
Konsole. Protokoll ( Hauptdiv. appendChild ( div4 ) ) ;
Skript >Geben Sie die Methode „appendChild()“ mit der Methode „console.log()“ an, genau wie die Methode „append()“.
Ausgang
Hier gibt die Ausgabe stattdessen das angehängte Element HTML inklusive der Styling-Eigenschaften zurück.
Abschluss
Die jQuery „ anhängen ()“ und das JavaScript „ appendChild ()“-Methoden unterscheiden sich aufgrund ihrer „ Syntaxen“, „Verwendung“ und „mehrere Knotenobjekte“. “. Darüber hinaus sind ihre „ zurückgegebene Werte “ unterscheiden sich auch voneinander. Beide Methoden sind nützlich und ihre Verwendung hängt von den Entscheidungen des Benutzers ab. In diesem Handbuch wurde der Unterschied zwischen jQuery aufgeführt. anhängen ()“ und das JavaScript „ appendChild ()“-Methode praktisch anwenden.