Jak dołączyć dziecko w DOM za pomocą metody dodatku w JavaScript?

Jeśli chcesz zmienić dowolny element w HTML za pomocą języka skryptowego, musisz odwołać. DOM w samym rdzeniu jest prosty interfejs programowania dla tego pliku HTML lub innymi słowy dla konkretnej strony internetowej. Żaden język skryptowy nie jest użyteczny bez interfejsu DOM, jeśli chodzi o manipulowanie elementami HTML.

Jedną z najczęstszych manipulacji stroną jest zastąpienie węzła lub dodanie węzła dziecięcego w węźle nadrzędnym. Można to zrobić przez appendChild () Metoda w JavaScript.

Co jest .Metoda appendChild ()

.appendChild () Metoda to wbudowana funkcja JavaScript, która jest używana do dodania węzła dziecięcego pod węzłem nadrzędnym. .appendChild () Wykonuje ten wyczyn, używając Interfejs węzła DOM. Znamy teraz to, co robi, więc spójrzmy na jego składnię.

Składnia .Metoda appendChild ()

Składnia .appendChild () jest dość oczywiste. To jest:

ParentNode.appendchild (childNode);

Jak wyraźnie widać, składa się z następujących czynności:

• ParentNode: Element, w którym ma zostać dołączony drugi węzeł.
• Childnode: Element do dołączenia.

Kiedy jest zastosowana metoda appendChild ()

.appendChild () dołącza nowo utworzony element w DOM. Jest również używany, gdy musisz zmienić zmianę już istniejącego elementu. W większości przypadków oba funkcje, przestrzeganie istniejących elementów i tworzenie nowego elementu, a następnie dodanie go do DOM, odbywa się na zdarzeniu wywołanym z powodu interakcji użytkownika z stroną internetową. To zdarzenie może kliknąć przycisk na ekranie, konkretną lokalizację myszy, a nawet określone podtrzymanie kluczy.

Przykład

Nie możemy się niczego nauczyć, dopóki tego nie wypróbujemy. Więc spróbujmy użyć .appendChild () metoda. Powinniśmy:

• Utwórz stronę HTML z węzłem nadrzędnym
• Utwórz przycisk, który wywoła proces dołączania
• Utwórz węzeł dziecięcy.
• Dodaj węzeł dziecięcy w węźle nadrzędnym na przycisku naciśnij.

Zacznijmy od pierwszego kroku, jakim jest skonfigurowanie strony HTML. Utwórz węzeł nadrzędny, tworząc div z id = „demo”: Wewnątrz tej div dajemy mu węzeł dziecięcy, który jest

etykietka:

To jest akapit 1 wewnątrz znacznika „div”

Zróbmy węzeł nadrzędny, który jest w naszym przypadku

Tag trochę widoczny, nadając mu kolor tła. Aby to zrobić, użyj id = „demo” i nadaj mu styl CSS z następującymi wierszami

Otrzymamy następujące wyniki.

Teraz wiemy, że węzeł nadrzędny

Tag jest podświetlony. Jeśli dodamy jakikolwiek węzeł dziecięcy do tego węzła nadrzędnego, podświetlony obszar wzrośnie.

Wracając do dołączania węzła dziecięcego. Utwórzmy spust, aby dołączyć węzeł dziecięcy, a w tym celu dodamy przycisk na ekranie z następującym wierszem:

Kliknij do appendchild

Dzięki temu nasza wyjście staje się:

Musimy zadeklarować funkcję, która dołączy węzeł dziecięcy w środku div Na każdym przycisku naciśnij. Utwórz taką funkcję:

Niech liczba = 2;
funkcja btnclicked ()
// Dodaj późniejszy kod w środku tutaj.

Jak można zauważyć, stworzyliśmy zmienną o nazwie „licznik”. Ta zmienna sprawdzi, ile węzłów dziecięcych dołączyliśmy do węzła nadrzędnego. Ponieważ mamy już

etykietka Jako pierwsze dziecko rozpoczynamy licznik od „2”.

Teraz potrzebujemy węzła dziecięcego. W tym celu stworzymy

etykietka Z pewnym tekstem w nim. Do tworzenia

tag, najpierw musimy utworzyć TextNode i a Węzeł akapitowy a następnie dołącz węzeł tekstowy do

etykietka węzeł.

Stwórz TextNode Z następującym poleceniem:

TextNode = dokument.CreateTextNode („To jest akapit” + licznik + „wewnątrz„ div ”tag”);

Jak widać, używamy wartości licznika, aby zachęcić użytkownika do liczby węzłów dziecięcych w węźle nadrzędnym.

Dalej jest utworzenie

Element tagu:

PTAG = dokument.createElement („p”);

Teraz musimy dodać TextNode do Ptag:

Ptag.appendChild (textNode);

Na koniec musimy to dołączyć Ptag w środku div z id = ”demo”:

ma nadrzędnyNode = dokument.getElementById („demo”);
ParentNode.appendchild (PTAG);

Przed wyjściem btnclicked () Funkcja, musimy również zwiększyć wartość licznika:

licznik ++;

Kompletny fragment kodu będzie wyglądał tak:

Czas w końcu uruchomić naszą stronę internetową i spojrzeć na wyniki. Powinieneś zobaczyć to na ekranie:

Tam, z powodzeniem dołączyliśmy różne węzły dziecięce w węźle nadrzędnym. Możemy to również potwierdzić, badając węzeł nadrzędny wewnątrz narzędzi programistów przeglądarki.

Widzimy wyraźnie, że wszystkie węzły dziecięce (

tagi) są rzeczywiście dołączane do div z id = ”demo”.

Wniosek

.appendChild () Metoda JavaScript służy do dołączenia węzła dziecięcego do węzła nadrzędnego za pomocą interfejsu węzła DOM. Ważnym zadaniem jest manipulowanie elementami strony internetowej za pomocą języka scenariusza. Jednym z powszechnych zadań podczas manipulowania stronami internetowymi jest dołączenie elementów jako węzły dziecięce do innych elementów. Nauczyliśmy się, jak .appendChild () Metoda działa, jej składnia i kiedy jest używana. Stworzyliśmy stronę internetową HTML, węzeł nadrzędny i dołączyliśmy węzły dziecięce za pomocą .appendChild () funkcjonować.