Dodaj JavaScript

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:

       53h1N2e2JcTmRTZIFItMB6Lz9mFISGZQ CP6OkNpEvNsAmFR5uykmTYLkS1F50UOokk62H14EHqSN4LOq0f3eGcfshnlatBNVgGGf0WKaDgoBs8g, z których możemy dodać listę elementów <h. block-codemirror-blocks-code-block code-block
      const student = document.querySelector ("ul"); 

    Ta linia kodu wybierze element na naszym strona z tagiem

    Korzystanie z metody JavaScript appendChild ()

    appendChild () pozwala nam dodaj elementy do węzła następujący kod na dole pliku scripts.js:

    Spowoduje to dodanie utworzonego wcześniej elementu listy do naszej listy. Otwórzmy naszą stronę internetową i zobaczmy wyniki:

    PPX9hW Qztc6gNJKNyOeRE2U6hg08YNO H0wIbQGGo9MfA90aFLp A7RDQ8 PsqdHEh6mSG OcHJeDB3efXaFHwI9Fa9DUKqkBjA7qzYk49xSJgps8C2vXIrS0sUxDOoDhiw TGS

    Nasza lista jest teraz część, my może sprawić, że nasz kod będzie wydajniejszy, dzięki czemu stworzymy funkcję dodającą elementy do naszej listy. To pozwoli nam dodać więcej elementów bez konieczności powtarzania naszego kodu createElement z poprzedniego.

    Edytuj createElement i textContent linie kodu, aby wyglądały tak:

    Ta funkcja utworzy nowy element

  • przy każdym wywołaniu. Następnie zmodyfikuj instrukcję appendChild (), aby użyć tej funkcji:

    Stworzy to trzech uczniów: Marka, Chloe i Louise. Otwórzmy ponownie nasz plik index.html i zobaczmy, czy dokonano zmian: