Hvordan legge til et barn i DOM ved hjelp av Appendchild -metoden i JavaScript?

Hvis du vil endre noe element i HTML ved hjelp av skriptspråk, må du referere til DOM også kjent som Document Object Model. DOM i sin kjerne er et enkelt programmeringsgrensesnitt for den HTML -filen eller med andre ord for den spesifikke websiden. Ingen skriptspråk er av noe bruk uten DOM -grensesnitt når det gjelder å manipulere HTML -elementer.

En av de vanligste manipulasjonene på websiden er å erstatte en node eller å legge til en barneknute inne i en overordnet node. Dette kan gjøres gjennom vedlegg () Metode i JavaScript.

Hva er .AppendChild () Metode

De .vedlegg () Metode er en innebygd JavaScript-funksjon som brukes til å legge til en barneknute under en overordnede node. De .vedlegg () utfører denne bragden ved å bruke Dom Node -grensesnitt. Vi er nå kjent med hva det gjør, så la oss se over syntaks.

Syntaks av .AppendChild () Metode

Syntaksen til .vedlegg () er ganske selvforklarende. Det er som:

Parentnode.AppendChild (ChildNode);

Som du tydelig kan se, består det av følgende:

• Parentnode: Elementet der den andre noden skal legges ved.
• barnebarn: Elementet som skal legges ved.

Når brukes AppendChild () metode

De .vedlegg () legger til et nyopprettet element inne i DOM. Det brukes også når du må omorganisere et allerede eksisterende element. I de fleste tilfeller blir begge funksjonene, omorganiserende de eksisterende elementene, og skaper et nytt element, og deretter legge det til DOM gjøres på en hendelse som er påkalt på grunn av brukerens interaksjon med websiden. Denne hendelsen kan være å klikke på en knapp på skjermen, en bestemt muselokasjon eller til og med et bestemt nøkkeltryk.

Eksempel

Vi kan ikke lære noe før vi prøver det. Så la oss prøve å bruke .vedlegg () metode. Vi skal:

• Opprett en HTML -side med en overordnede node
• Opprett en knapp som vil påkalle vedløpsprosessen
• Lag en barneknute.
• Legg til barneknuten i overordnede noden på knappen trykk.

La oss starte med det første trinnet som skal sette opp en HTML -side. Opprette en overordnet node ved å lage en div med en id = “Demo”: Inne i denne diven gir vi den en barneknute som er en

stikkord:

Dette er avsnitt 1 i "Div" -taggen

La oss lage overordnede noden som er i vårt tilfelle

Merk deg litt fremtredende ved å gi den en bakgrunnsfarge. For å gjøre det, bruk ID = ”Demo” og gi den litt CSS -styling med følgende linjer

Vi får følgende resultater.

Nå vet vi at foreldroden til

Tag er fremhevet. Hvis vi legger til noen barneknute inne i denne overordnede noden, vil det uthevede området øke.

Kommer tilbake til å legge til en barneknute. La oss lage en trigger for å legge til en barneknute, og for det formålet skal vi legge til en knapp på skjermen med følgende linje:

Klikk for å legge til

Med dette blir produksjonen vår:

Vi må erklære funksjonen som vil legge til en barneknute inne i div På hver knapp Trykk på. Lag funksjonen slik:

La teller = 2;
funksjon btnclicked ()
// Legg til den senere koden her inne.

Som du kanskje legger merke til, opprettet vi en variabel som heter "Counter". Denne variabelen vil føre en sjekk på hvor mange barneknuter vi har lagt ved foreldroden. Siden vi allerede har en

stikkord Som det første barnet starter vi disken fra “2”.

Nå trenger vi en barneknute. For dette skal vi lage en

stikkord med litt tekst inni den. For å lage en

Tag, vi må først lage en Tekstnode og a avsnitt node og legg deretter til tekstnoden i

stikkord Node.

Lage en Tekstnode med følgende kommando:

TextNode = Dokument.createTextNode ("Dette er avsnitt" + counter + 'Inside "div" tag');

Som du ser bruker vi motverdien for å be brukeren om hvor mange barneknuter som er til stede i overordnet node.

Neste opp er å lage

Tagelement:

PTAG = dokument.CreateElement ("P");

Nå må vi legge til Tekstnode inn i det PTAG:

PTAG.appendchild (textNode);

Til slutt må vi legge til dette PTAG inne i div med id = ”Demo”:

ParentNode = Dokument.getElementById ("Demo");
Parentnode.appendchild (PTAG);

Før du forlater btnclicked () Funksjon, vi må også øke verdien av telleren:

teller ++;

Det komplette kodebiten vil se slik ut:

På tide å endelig kjøre websiden vår og se på resultatene. Du bør se dette på skjermen din:

Der har du det, vi har lagt ved forskjellige barneknuter inne i en foreldrode. Vi kan også bekrefte det ved å undersøke overordnede noden i nettleserens utviklerverktøy.

Vi kan tydelig se at alle barneknuter (

tagger) er faktisk lagt inn i div med id = ”Demo”.

Konklusjon

De .vedlegg () Metode for JavaScript brukes til å legge til en barneknute inne i en overordnede node ved hjelp av DOM -nodegrensesnittet. Å manipulere elementene på nettsiden ved hjelp av et skriptspråk er en viktig oppgave. En av de vanlige oppgavene mens du manipulerer websider er å legge til elementer som barneknuter til andre elementer. Vi lærte hvordan .vedlegg () metoden fungerer, syntaks, og når den brukes. Vi opprettet en HTML -webside, en overordnet node og vedlagte barneknuter inne i den ved hjelp av .vedlegg () funksjon.