Dodaj JavaScript

Michael Zippo

Metoda appendChild () JavaScript dodaje element na końcu węzła. appendChild() jest często używany do dodawania

elementów do listy. Musisz użyć wielu instrukcji appendChild(), jeśli chcesz dodać więcej niż jeden element do węzła.

Niektóre listy zawierają tekst; inne katalogi zawierają obrazy; inne listy zawierają niestandardowe elementy sieci. Niezależnie od zawartości listy, jedno jest pewne: strony internetowe są pełne list.

Gdy tworzysz listę, zwykle kodujesz jej wartości „Ęã‚Ęãw HTML. Ten proces można przyspieszyć za pomocą metody o nazwie JavaScript appendChild. Ta metoda umożliwia dodanie elementu na końcu listy lub innego elementu internetowego, takiego jak cytat blokowy.

W tym przewodniku omówimy, co appendChild ( ) jest w JavaScript i jak to działa. Na początek przyjrzymy się przykładowi. Zacznijmy!

Co to jest JavaScript appendChild?

appendChild() dołącza węzeł na końcu węzła nadrzędnego. appendChild() jest powszechnie używany do dodawania elementów do listy HTML. Węzeł odnosi się do dowolnego elementu HTML Document Object Model (DOM).

Składnia appendChild () wygląda tak:

"rodzic" odnosi się do elementu, do którego chcesz dodać dziecko. „Dziecko” to element, który chcesz dodać na końcu elementu nadrzędnego.

Musisz użyć metody takiej jak JavaScript getElementById () lub inny "Get", aby pobrać element. Alternatywnie możesz utworzyć element HTML w JavaScript, a następnie użyć tego elementu jako obiektu „nadrzędnego” za pomocą appendChild ().

Na przykład lista przepisów na bułeczki zawierają listę węzłów. Te węzły byłyby prawdopodobnie

ponieważ stworzylibyśmy listę.

Nadrzędny

Konfigurowanie interfejsu

Po pierwsze, wstawimy podstawowy interfejs wyświetlający naszą listę nazwisk uczniów. Otwórz plik o nazwie index.html i wklej ten kod:

Stworzyliśmy podstawowy dokument HTML. Ten dokument zawiera tytuł i listę bez elementów podrzędnych. Lista jest reprezentowana przez tag
.
Teraz dodajmy niektóre style do naszej strony w pliku o nazwie styles.css, aby poprawić estetykę naszej strony internetowej ge:

Ta reguła CSS zdefiniuje jasnoszary kolor tła dla naszej strony. W tym celu używamy właściwości CSS background-color . Przenosi również zawartość tagu na środek strony. Aby dowiedzieć się więcej o strukturze układu, zapoznaj się z naszym Przewodnikiem po modelach ramek CSS .
Nasza strona nadal nie działa. Nie dodaliśmy niczego do listy. To co nasi strona wygląda, gdy go otworzyć w przeglądarce:

const student = document.querySelector ("ul");

Ta linia kodu wybierze element na naszym strona z tagiem
To reprezentuje naszą listę. Następnie utworzymy element do dodania do naszej listy:

T jego kod tworzy węzeł tekstowy ze znacznikiem
zawierającym słowo „Steven”. Teraz musimy tylko dodać nasz nowo utworzony element do naszej listy.

Dodaj JavaScript

Co to jest JavaScript appendChild?

Konfigurowanie interfejsu

Korzystanie z metody JavaScript appendChild ()