JavaScript to wszechstronny język programowania, który umożliwia tworzenie i manipulowanie elementami tak samo jak HTML (Hyper Text Markup Language). Ta funkcja jest zgodna z metodami „append()” i „appendChild()”. Jak sama nazwa wskazuje, obie metody dołączają elementy HTML, takie jak obiekty String lub Node. Różnią się one jednak między sobą w zależności od ich funkcjonalności i innych czynników.
Ten przewodnik podkreśla kluczowe różnice między jQuery „ dodać ()” i JavaScript „ dołączDziecko ()” metody.
Zanim przejdziemy do różnic między jQuery „ dodać ()” i JavaScript „ dołączDziecko ()”, zapoznaj się najpierw z podstawami tych metod.
Co to jest metoda append() jQuery?
jQuery” dodać ()” wstawia żądane obiekty „Node” i „String” na końcu jako ostatni element potomny elementu nadrzędnego.
Składnia
$ ( selektor ) . dodać ( treść , funkcjonować ( indeks , HTML ) )W powyższej składni:
- treść : Odnosi się do elementów HTML, elementów DOM lub obiektów jQuery.
- funkcjonować : Jest to dodatkowy parametr określający zdefiniowaną przez użytkownika funkcję JavaScript posiadającą parametry „index (pozycja elementu)” oraz „html (html wybranych elementów)”.
Co to jest metoda JavaScript appendChild()?
Metoda „appendChild()” dodaje obiekt „Node” tylko po ostatnim potomku elementu nadrzędnego. Najpierw tworzy żądany obiekt Node za pomocą metody „createElement()”, a następnie dołącza go.
Składnia
element. dołączDziecko ( węzeł )Ta składnia wymaga tylko jednego parametru, tj. „ węzeł ”.
Jak sugerują ich nazwy, omówione powyżej metody różnią się od siebie. W tej sekcji przedstawiono niektóre czynniki, według których się różnią. Przyjrzyjmy się im.
Różnice między metodą append() i JavaScript appendChild() jQuery
| Warunki | jQuery dołącza () | JavaScript dołącza dziecko() |
|---|---|---|
| Stosowanie | Można go użyć do dołączenia elementu nadrzędnego poprzez dodanie nowego „ Węzeł ' I ' Strunowy ” obiektów w tym samym czasie. | Można go użyć tylko do dołączenia elementu nadrzędnego za pomocą nowego „ Węzeł ” utworzony przy użyciu „ utwórz Element ()' metoda. |
| Wiele obiektów węzłów | „ dodać ()” może dodać wiele obiektów Node w powiązanym elemencie nadrzędnym w tym samym czasie w następującym formacie. Format : „div.append(pierwsze dziecko, drugie dziecko, ‘Linuxhint’);” |
„ dołączDziecko ()” działa dobrze z wieloma obiektami Node, ale dołącza tylko pierwszy element potomny na raz, a następnie następny. Format : „div.appendChild(pierwsze dziecko, drugie dziecko, ‘Linuxhint’);” |
| Wartość zwracana | „ dodać ()” nie zwraca dołączonego obiektu Node, ponieważ pokazuje zwróconą wartość „nieokreśloną”, tj. Format : console.log(appendChildValue) // undefined |
Z drugiej strony „ dołączDziecko ()” zwraca wartość zawierającą dołączony obiekt Node. Format : console.log(appendChildValue) //
|
Teraz przejdź do praktycznego wdrożenia wymienionych kluczowych różnic.
Różnica 1: Stosowanie metod append() i JavaScript appendChild() jQuery
Zgodnie z pierwszą różnicą, „ dodać ()” dołącza zarówno Node, jak i String, podczas gdy metoda „appendChild()” dołącza tylko obiekty Node.
Kod HTML
Najpierw spójrz na podany kod HTML:
< ciało >< h2 > Metoda „append()” jQuery < / h2 > //Do dołączenia() < h2 > Metoda jQuery „appendChild()”. < / h2 > //Dla appendChild()
< przycisk ID = 'btn1' na kliknięcie = 'mojaFunkcja1()' > Dołącz łańcuch DOM < / przycisk >
< przycisk ID = 'btn2' na kliknięcie = 'mojaFunkcja2()' > Dołącz węzeł DOM < / przycisk >
< P ID = 'Do' > To jest akapit. < / P >
< ol ID = 'lista' >
< To > Samouczek JavaScript 1 < / To >
< To > Kurs JavaScript 2 < / To >
< To > Kurs JavaScriptu 3 < / To >
< / ol >
< / ciało >
W powyższych liniach kodu:
- Znacznik „
” określa podtytuł poziomu 2.
- Tagi „
- Znacznik „
” tworzy pusty akapit z przypisanym identyfikatorem „para”, aby pokazać dołączoną wartość ciągu.
- Znacznik „
- ” dodaje uporządkowaną listę o identyfikatorze „list”, a wymienione elementy za pomocą znaczników „
- ”.
Notatka : Postępuj zgodnie z powyższym kodem HTML w pierwszej różnicy między metodami „append()” i „appendChild()”.
Metoda „append()” Kod jQuery
Najpierw omówienie kodu jQuery metody „append()”:
< głowa >< źródło skryptu = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenariusz >
< scenariusz >
$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( '#btn1' ) . Kliknij ( funkcjonować ( ) {
$ ( 'P' ) . dodać ( ' Dołączony ciąg znaków .' ) ;
} ) ;
$ ( '#btn2' ) . Kliknij ( funkcjonować ( ) {
$ ( 'ol' ) . dodać ( '
} ) ;
} ) ;
scenariusz >
głowa >
W powyższych liniach kodu:
- Najpierw określ jQuery „ CDN ”ścieżka z oficjalnej strony internetowej” https://jquery.com/ ” przy pomocy „ źródło ' atrybut.
- Następnie dodaj małą sekcję skryptu, która najpierw wykorzystuje „ gotowy ()” metoda wywołania podanego „ funkcjonować ()” podczas ładowania dokumentu HTML.
- Następnie „ Kliknij ()” wykonuje funkcję powiązaną z przyciskiem o identyfikatorze „ btn1 ” po kliknięciu przycisku.
- W definicji funkcji „ dodać ()” służy do dołączania docelowego elementu akapitu za pomocą podanego ciągu.
- Ten sam proces jest wykonywany dla dodanego „ uporządkowana lista ” tj. obiekt Node, aby dołączyć go do danego elementu.
Wyjście
Tutaj potwierdzono, że zarówno obiekty „String”, jak i „Node” są dołączane za pomocą metody „append()”.
Kod JavaScript metody „appendChild()”.
Teraz przyjrzyj się praktycznie metodzie JavaScript „appendChild()”:
< scenariusz >funkcjonować mojaFunkcja1 ( ) {
Do. dołączDziecko ( „
Dołączony ciąg znaków
” ) //Dołącz łańcuch DOM} funkcjonować mojaFunkcja2 ( ) {
konst element = dokument. utwórz Element ( 'To' ) ;
konst węzeł = dokument. utwórz Węzeł Tekstowy ( „Dołączony element” ) ;
element. dołączDziecko ( węzeł ) ; //Dołącz węzeł DOM
konst element = dokument. getElementById ( 'lista' ) ;
element. dołączDziecko ( element ) ;
}
scenariusz >
W powyższym fragmencie kodu:
- Zdefiniuj nazwę funkcji „ mojaFunkcja1 ()”, która używa metody „appendChild()” w celu dołączenia dodanego akapitu z podanym ciągiem znaków.
- Dalej w „ mojaFunkcja2 ()”, metoda „createElement()” tworzy nowy element listy, a następnie dodaje do niego tekst za pomocą metody „createTextNode()”.
- Następnie dołącz utworzony węzeł listy wraz z jego tekstem za pomocą metody „appendChild()”.
- Na koniec dołącz nowo utworzony węzeł listy do listy uporządkowanej, do której uzyskano dostęp, której identyfikatorem jest „list”, za pomocą metody „appendChild()”.
Wyjście
Jak widać, po kliknięciu przycisku dołączany jest tylko obiekt „Node”, a nie „String”.
Błąd
Naciśnij „F12”, aby otworzyć konsolę internetową i sprawdzić problem:
Jak widać, konsola pokazuje błąd podczas dołączania obiektu String przy użyciu metody „appendChild()”. Potwierdza się zatem, że metoda „appendChild()” nie dołącza obiektu typu String.
Różnica 2: Stosowanie metod jQuery append() i JavaScript appendChild() na wielu obiektach węzłów
Drugą różnicę między metodami „append()” i „appendChild()” można przeanalizować, wykonując te metody na wielu obiektach węzłów. Aby zobaczyć jego praktyczną realizację, postępuj zgodnie z podanymi kodami.
Kod HTML
Przejdźmy przez kod HTML:
< dz ID = „główny dział” >< dz styl = „wyświetl: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: orangered; margin: 10px; text-align: center;” > Jeden < / dz >
< dz styl = „wyświetl: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: orangered; margin: 10px; text-align: center;” > Dwa < / dz >
< dz styl = „wyświetl: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: orangered; margin: 10px; text-align: center;” > Trzy < / dz >
< / dz >
Tutaj powyższe linie kodu zawierają główny element „
Notatka : Powyższy kod HTML jest zgodny z drugą różnicą między metodami „append()” i „appendChild()”.
Metoda append().
Teraz wykonaj następujący skrypt:
< scenariusz >konst dział główny = dokument. getElementById ( „główny dział” ) ;
konst dział4 = dokument. utwórz Element ( 'dział' ) ;
dział4. wewnętrzny HTML = „Cztery” ;
dział4. styl . kolor tła = 'różowy' ;
dział4. lista klas . dodać ( 'dział' ) ; konst dział5 = dokument. utwórz Element ( 'dział' ) ;
dział5. wewnętrzny HTML = 'Pięć' ;
dział5. styl . kolor tła = 'różowy' ;
dział5. lista klas . dodać ( 'dział' ) ;
dział główny dodać ( dział4 , dział5 ) ;
scenariusz >
W powyższym fragmencie kodu:
- Zmienna „maindiv” uzyskuje dostęp do dodanego „div” za pomocą swojego identyfikatora „main-div” za pomocą metody „getElementById()”.
- Następnie metoda „createElement()” tworzy nowy obiekt węzła „div”, dodaje określony tekst za pomocą właściwości „innerHTML” i stosuje kolor tła za pomocą właściwości „style.backgroundcolor”.
- Następnie metoda „add()” dodaje do niej określone właściwości CSS klasy za pomocą właściwości „classList”.
- Ta sama procedura jest stosowana dla następnego nowo utworzonego elementu „”.
- Na koniec oba nowo utworzone obiekty Node są dołączane w tym samym czasie za pomocą metody „append()”.
Wyjście
Tutaj nowo utworzone wiele obiektów Node jest odpowiednio dołączanych do tego samego elementu nadrzędnego.
Metoda „appendChild()”.
Następnie kontynuuj z metodą „appendChild()”:
< scenariusz >
dział główny dołączDziecko ( dział4 ) ;
dział główny dołączDziecko ( dział5 ) ;
scenariusz >Jak widać, metoda „appendChild()” dodaje wiele obiektów Node jeden po drugim do tego samego elementu nadrzędnego.
Wyjście
Dane wyjściowe są takie same jak metoda „append()”, ale różnią się pod względem określania obiektów Node.
Różnica 3: Wartość zwracana metod Applied jQuery append() i JavaScript appendChild()
Ostatnią różnicą jest „zwrócona wartość” metod „append()” i „appendChild()”. Zobaczmy to praktycznie.
Notatka : Kod HTML jest taki sam jak w przypadku różnicy 2 (obiekty z wieloma węzłami).
Metoda „dołącz()”.
Spójrz na podane linie kodu:
< scenariusz >
konsola. dziennik ( dział główny dodać ( dział4 ) ) ;
scenariusz >W tym przypadku metoda „console.log()” jest stosowana do sprawdzania zwracanej wartości metody „append()” podczas dołączania określonego obiektu Node.
Wyjście
Naciśnij „F12”, aby otworzyć konsolę internetową:
Jak widać, wartość zwracana przez metodę „append()” to „ nieokreślony ”.
Metoda appendChild().
Rozważmy teraz następujący kod wykorzystujący metodę „appendChild()”:
< scenariusz >
konsola. dziennik ( dział główny dołączDziecko ( dział4 ) ) ;
scenariusz >Określ metodę „appendChild()” z metodą „console.log()” taką samą jak metoda „append()”.
Wyjście
Tutaj dane wyjściowe zwracają zamiast tego dołączony element HTML, w tym właściwości stylizacji.
Wniosek
jQuery” dodać ()” i JavaScript „ dołączDziecko ()” metody różnią się na podstawie ich „ składni”, „użycie” i „wiele obiektów Node ”. Co więcej, ich „ zwracane wartości ” również różnią się od siebie. Obie metody są przydatne, a ich użycie zależy od wyborów użytkownika. W tym przewodniku wymieniono różnicę między jQuery „ dodać ()” i JavaScript „ dołączDziecko ()” metoda praktycznie.