Javascript toevoegen

De appendChild () JavaScript-methode voegt een element toe aan het einde van een knooppunt. appendChild () wordt vaak gebruikt om

  • elementen aan een lijst toe te voegen. U moet meerdere appendChild ()-instructies gebruiken als u meer dan één item aan een knooppunt wilt toevoegen.

    Sommige lijsten bevatten tekst ; andere mappen bevatten afbeeldingen; andere lijsten bevatten aangepaste webitems. Ongeacht de inhoud van een lijst, één ding is zeker: webpagina`s staan vol met lijsten.

    Als u een lijst maakt, codeert u gewoonlijk de waarden ervan ‚Äã‚Äãin HTML. Dit proces kan worden versneld met een methode genaamd JavaScript appendChild. Met deze methode kunt u een item toevoegen aan het einde van een lijst of een ander webitem, zoals een blockquote.

    In deze handleiding zullen we praten over wat appendChild ( ) is in JavaScript en hoe het werkt. We zullen een voorbeeld bekijken om u op weg te helpen. Laten we beginnen!

    Wat is appendChild JavaScript?

    appendChild () voegt een knooppunt toe aan het einde van een bovenliggend knooppunt. appendChild () wordt vaak gebruikt om items aan een HTML-lijst toe te voegen. Een knooppunt verwijst naar elk element van het HTML Document Object Model (DOM).

    De syntaxis van appendChild () ziet er als volgt uit:

    "ouder" verwijst naar het element waaraan u een kind wilt toevoegen. "Child" is het item dat u aan het einde van de parent wilt toevoegen.

    U moet een methode gebruiken zoals JavaScript getElementById () of een andere "Get" om een element op te halen. U kunt ook een HTML-element in JavaScript maken en dat element vervolgens gebruiken als een "ouder"-object met appendChild ().

  • Een lijst met sconerecepten zou bijvoorbeeld bevatten een lijst met knooppunten. Deze knooppunten zijn waarschijnlijk

  • omdat we een lijst zouden maken.

    Een bovenliggende

  • Een front-end opzetten

    Ten eerste zullen we een basisinterface opzetten met onze lijst met studentennamen. Open een bestand met de naam index.html en plak deze code:

    We hebben een eenvoudig HTML-document gemaakt. Dit document bevat een titel en een lijst zonder subelementen. De lijst wordt weergegeven door de tag

      .

      Laten we nu toevoegen enkele stijlen naar onze pagina in een bestand met de naam styles.css om de esthetiek van onze webpagina te verbeteren ge:

      Deze CSS-regel definieert een lichtgrijze achtergrondkleur voor onze pagina. Hiervoor gebruiken we de CSS background-color eigenschap . Het verplaatst ook de inhoud van de tag naar het midden van de pagina. Bekijk onze handleiding voor CSS-boxmodellen voor meer informatie over hoe we de lay-out hebben gestructureerd.

      Onze pagina werkt nog steeds niet. We hebben niets aan de lijst toegevoegd. Dit is wat onze pagina eruit wanneer u het opent in een browser:

       53h1N2e2JcTmRTZIFItMB6Lz9mFISGZQ CP6OkNpEvNsAmFR5uykmTYLkS1F50UOokk62H14EHqSN4LOq0f3eGcfshnlatBuNVgGGf0WKaDgoBs8g en voeg onderdelen toe aan de web ><h3 lijst block-codemirror-blocks-code-block code-block
      const student = document.querySelector (" ul "); 

    Deze regel code selecteert het item op onze pagina met de tag

    Met de methode JavaScript appendChild ()

    appendChild () kunnen we voeg elementen toe aan een knooppunt de volgende code onderaan het bestand scripts.js:

    Hiermee wordt het lijstitem dat we eerder hebben gemaakt aan onze lijst toegevoegd. Laten we onze webpagina openen en de resultaten bekijken:

    PPX9hW Qztc6gNJKNyOeRE2U6hg08YNO H0wIbQGGo9MfA90aFLp A7RDQ8 PsqdHEh6mSG OcHJeDB3efXaFHwI9Fa9DUKqkBjA7qzYk49xSJgps8C2vXIrS0sUxDOoDhiw TGS

    onze lijst is nu een deel, wij kan onze code efficiënter maken door een functie te maken die elementen aan onze lijst toevoegt. Hierdoor kunnen we meer elementen toevoegen zonder onze createElement-code van eerder te hoeven herhalen.

    Bewerk de createElement en textContent regels code zien er als volgt uit:

    Deze functie maakt elke keer dat deze wordt aangeroepen een nieuw

  • element. Pas vervolgens de instructie appendChild () aan om deze functie te gebruiken:

    Hierdoor worden drie studenten gemaakt: Mark, Chloe en Louise. Laten we ons bestand index.html opnieuw openen en kijken of de wijzigingen zijn aangebracht: