JavaScript je všestranný programovací jazyk, který umožňuje vytváření a manipulaci se stejnými prvky jako HTML (Hyper Text Markup Language). K provedení této funkce se řídí metodami „append()“ a „appendChild()“. Jak jejich název napovídá, obě metody připojují prvky HTML, jako jsou objekty String nebo Node. Liší se však od sebe v závislosti na jejich funkčnosti a dalších faktorech.
Tato příručka zdůrazňuje klíčové rozdíly mezi jQuery „ připojit ()“ a JavaScript „ appendChild ()“ metody.
Než přejdeme k rozdílům mezi jQuery “ připojit ()“ a JavaScript „ appendChild ()“, nejprve se podívejte na základy těchto metod.
Co je metoda jQuery append()?
jQuery' připojit ()“ vloží požadované objekty „Node“ a „String“ na konec jako poslední potomek nadřazeného prvku.
Syntax
$ ( volič ) . připojit ( obsah , funkce ( index , html ) )Ve výše uvedené syntaxi:
- obsah : Odkazuje na prvky HTML, prvky DOM nebo objekty jQuery.
- funkce : Je to další parametr, který specifikuje uživatelem definovanou funkci JavaScriptu s parametry „index (pozice prvku)“ a „html (html vybraných prvků).
Co je to metoda JavaScript appendChild()?
Metoda „appendChild()“ pouze přidá objekt „Node“ za posledního potomka nadřazeného prvku. Nejprve vytvoří požadovaný objekt Node pomocí metody „createElement()“ a poté jej připojí.
Syntax
živel. appendChild ( uzel )Tato syntaxe vyžaduje pouze jeden parametr, tj. uzel “.
Jak jejich názvy napovídají, výše diskutované metody se od sebe liší. Tato část uvádí některé faktory, ve kterých se liší. Pojďme se na ně podívat.
Rozdíly mezi metodami jQuery append() a JavaScript appendChild()
| Podmínky | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Používání | Lze jej použít k připojení nadřazeného prvku přidáním nového „ Uzel ' a ' Tětiva “ objekty současně. | Lze jej použít pouze k připojení nadřazeného prvku novým „ Uzel “ vytvořené pomocí „ createElement ()“ metoda. |
| Více objektů uzlů | ' připojit ()” může přidat více objektů Node do svého přidruženého nadřazeného prvku současně v následujícím formátu. Formát : “div.append(firstchild, secondchild, ‘Linuxhint’);” |
' appendChild ()” metoda funguje dobře s více objekty Node, ale připojuje pouze první potomek najednou a potom další. Formát : “div.appendChild(firstchild, secondchild, ‘Linuxhint’);” |
| Návratová hodnota | ' připojit ()“ metoda nevrací připojený objekt Node, protože zobrazuje „nedefinovanou“ vrácenou hodnotu, tj. Formát : console.log(appendChildValue) // nedefinováno |
Na druhou stranu, „ appendChild ()” metoda vrací hodnotu obsahující připojený objekt Node. Formát : console.log(appendChildValue) //
|
Nyní přejděte k praktické implementaci uvedených klíčových rozdílů.
Rozdíl 1: Použití metod jQuery append() a JavaScript appendChild()
Podle prvního rozdílu „ připojit ()“ metoda připojuje uzel i řetězec, zatímco metoda „appendChild()“ připojuje pouze objekty Node.
HTML kód
Nejprve se podívejte na uvedený HTML kód:
< tělo >< h2 > Metoda jQuery 'append()'. < / h2 > //Pro append() < h2 > Metoda jQuery 'appendChild()'. < / h2 > //Pro appendChild()
< knoflík id = 'btn1' při kliknutí = 'myFunc1()' > Připojte řetězec DOM < / knoflík >
< knoflík id = 'btn2' při kliknutí = 'myFunc2()' > Připojte uzel DOM < / knoflík >
< p id = 'pro' > Toto je odstavec. < / p >
< ol id = 'seznam' >
< že > Výukový program JavaScript 1 < / že >
< že > Výukový program JavaScript 2 < / že >
< že > Výukový program JavaScript 3 < / že >
< / ol >
< / tělo >
Ve výše uvedených řádcích kódu:
- Značka „
“ definuje podnadpis úrovně 2.
- Tagy „
- Značka „
“ vytvoří prázdný odstavec s přiřazeným id „para“, který zobrazí hodnotu připojeného řetězce.
- Značka „
- “ přidá uspořádaný seznam s id „seznam“ a uvedené položky pomocí značek „
- “.
Poznámka : Postupujte podle výše napsaného kódu HTML v prvním rozdílu metod „append()“ a „appendChild()“.
Metoda „append()“ Kód jQuery
Nejprve přehled kódu jQuery metody „append()“:
< hlava >< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skript >
< skript >
$ ( dokument ) . připraveno ( funkce ( ) {
$ ( '#btn1' ) . klikněte ( funkce ( ) {
$ ( 'p' ) . připojit ( ' Připojený řetězec .' ) ;
} ) ;
$ ( '#btn2' ) . klikněte ( funkce ( ) {
$ ( 'ol' ) . připojit ( '
} ) ;
} ) ;
skript >
hlava >
Ve výše uvedených řádcích kódu:
- Nejprve zadejte jQuery “ CDN “cesta z jeho oficiálních stránek” https://jquery.com/ “ s pomocí „ src ' atribut.
- Dále přidejte malou sekci skriptu, která nejprve využívá „ připraveno ()“ metoda pro vyvolání uvedeného „ funkce ()“, když je načten dokument HTML.
- Poté se „ klikněte ()“ metoda provede funkci, která je spojena s tlačítkem, jehož id je „ btn1 “ po kliknutí na tlačítko.
- V definici funkce je „ připojit ()” metoda se používá k připojení cílového prvku odstavce s uvedeným řetězcem.
- Stejný proces se provádí pro přidané „ objednaný seznam ” tj. objekt Node, který jej připojí k dané položce.
Výstup
Zde je potvrzeno, že objekty „String“ i „Node“ jsou připojeny pomocí metody „append()“.
Kód JavaScript metody „appendChild()“.
Nyní se podívejte na metodu JavaScriptu „appendChild()“ prakticky:
< skript >funkce myFunc1 ( ) {
pro. appendChild ( '
Připojený řetězec
' ) //Přidat řetězec DOM} funkce myFunc2 ( ) {
konst živel = dokument. createElement ( 'že' ) ;
konst uzel = dokument. createTextNode ( 'Připojená položka' ) ;
živel. appendChild ( uzel ) ; //Přidat uzel DOM
konst živel = dokument. getElementById ( 'seznam' ) ;
živel. appendChild ( živel ) ;
}
skript >
Ve výše uvedeném úryvku kódu:
- Definujte název funkce ' myFunc1 ()“, který používá metodu „appendChild()“ k připojení přidaného odstavce s daným řetězcem.
- Dále v „ myFunc2 ()“, metoda „createElement()“ vytvoří nový prvek seznamu a poté k němu přidá nějaký text pomocí metody „createTextNode()“.
- Poté přidejte vytvořený uzel seznamu s jeho textem pomocí metody „appendChild()“.
- Nakonec přidejte nově vytvořený uzel seznamu k přístupnému uspořádanému seznamu, jehož id je „list“ pomocí metody „appendChild()“.
Výstup
Jak je vidět, po kliknutí na tlačítko se připojí pouze objekt „Node“, nikoli „String“.
Chyba
Stisknutím „F12“ otevřete webovou konzoli a zkontrolujte problém:
Jak je vidět, konzola zobrazuje chybu při přidávání objektu String pomocí metody „appendChild()“. Je tedy potvrzeno, že metoda „appendChild()“ nepřipojuje objekt String.
Rozdíl 2: Použití metod jQuery append() a JavaScript appendChild() na objekty s více uzly
Druhý rozdíl mezi metodami „append()“ a „appendChild()“ lze analyzovat provedením těchto metod na více objektech uzlů. Chcete-li vidět jeho praktickou implementaci, postupujte podle uvedených kódů.
HTML kód
Pojďme si projít HTML kód:
< div id = 'hlavní div' >< div styl = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:organed; margin:10px; text-align:center;' > Jeden < / div >
< div styl = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:organed; margin:10px; text-align:center;' > Dva < / div >
< div styl = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:organed; margin:10px; text-align:center;' > Tři < / div >
< / div >
Zde výše uvedené řádky kódu obsahují hlavní prvek „
Poznámka : Výše napsaný kód HTML je následován ve druhém rozdílu metod „append()“ a „appendChild()“.
metoda append().
Nyní pokračujte následujícím skriptem:
< skript >konst maindiv = dokument. getElementById ( 'hlavní div' ) ;
konst div4 = dokument. createElement ( 'div' ) ;
div4. vnitřní HTML = 'čtyři' ;
div4. styl . barva pozadí = 'růžový' ;
div4. classList . přidat ( 'div' ) ; konst div5 = dokument. createElement ( 'div' ) ;
div5. vnitřní HTML = 'Pět' ;
div5. styl . barva pozadí = 'růžový' ;
div5. classList . přidat ( 'div' ) ;
maindiv. připojit ( div4 , div5 ) ;
skript >
Ve výše uvedeném úryvku kódu:
- Proměnná „maindiv“ přistupuje k přidanému „div“ pomocí svého id „main-div“ pomocí metody „getElementById()“.
- Dále metoda „createElement()“ vytvoří nový objekt Node „div“, přidá zadaný text pomocí vlastnosti „innerHTML“ a použije barvu pozadí prostřednictvím vlastnosti „style.backgroundcolor“.
- Poté k ní metoda „add()“ přidá zadané vlastnosti CSS třídy pomocí vlastnosti „classList“.
- Stejný postup se použije pro další nově vytvořený prvek „“.
- Nakonec jsou oba nově vytvořené objekty Node připojeny současně pomocí metody „append()“.
Výstup
Zde se nově vytvořené vícenásobné objekty Node odpovídajícím způsobem připojí ke stejnému rodičovskému prvku.
Metoda 'appendChild()'.
Dále pokračujte metodou „appendChild()“:
< skript >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
skript >Jak je vidět, metoda „appendChild()“ přidává více objektů Node jeden po druhém do stejného nadřazeného prvku.
Výstup
Výstup je stejný jako u metody „append()“, ale liší se ve specifikaci objektů Node.
Rozdíl 3: Návratová hodnota použitých metod jQuery append() a JavaScript appendChild()
Posledním rozdílem je „vrácená hodnota“ metod „append()“ a „appendChild()“. Podívejme se na to prakticky.
Poznámka : Kód HTML je stejný jako u Rozdílu 2 (více uzlových objektů).
Metoda 'append()'.
Podívejte se na dané řádky kódu:
< skript >
řídicí panel. log ( maindiv. připojit ( div4 ) ) ;
skript >Zde je použita metoda „console.log()“ ke kontrole vrácené hodnoty metody „append()“ při přidávání zadaného objektu Node.
Výstup
Stisknutím „F12“ otevřete webovou konzoli:
Jak je vidět, vrácená hodnota metody „append()“ je „ nedefinováno “.
metoda appendChild().
Nyní zvažte následující kód využívající metodu „appendChild()“:
< skript >
řídicí panel. log ( maindiv. appendChild ( div4 ) ) ;
skript >Určete metodu „appendChild()“ pomocí metody „console.log()“ stejnou jako u metody „append()“.
Výstup
Zde výstup místo toho vrátí připojený prvek HTML včetně vlastností stylu.
Závěr
jQuery' připojit ()“ a JavaScript „ appendChild ()“ metody se liší na základě jejich „ syntaxe, „usage“ a „multiple Node objects“. “. Navíc jejich „ vrácené hodnoty “ se také navzájem liší. Obě metody jsou užitečné a jejich použití závisí na volbě uživatele. Tato příručka uvádí rozdíl mezi jQuery „ připojit ()“ a JavaScript „ appendChild ()“ metoda prakticky.