Hvordan legge til eller slette HTML -elementer gjennom JavaScript

I JavaScript -programmet ditt kan du bruke “vedlegg ()”Og“INSERTBEFORE ()”Metoder for å legge til HTML -elementene og for å slette HTML -elementene”fjerne()" og "fjerne () ”” Metoder påkalles.

Denne oppskrivningen vil diskutere prosedyrene for å legge til eller slette HTML -elementer gjennom JavaScript. Vi vil også demonstrere bruken av AppendChild () og InsertBefore () -metoder for å legge til HTML -elementene. Videre vil eksempler relatert til å fjerne () og fjerne () metoder for å slette HTML -elementene bli gitt til deg. Så la oss starte!

Hvordan legge til HTML -elementer gjennom JavaScript ved hjelp av AppendChild () -metoden

JavaScript appendChild () -metoden brukes til å legge til et HTML -element som barnet til den spesifiserte foreldroden. Denne metoden brukes til å flytte HTML -elementer.

Syntaks av AppendChild () -metoden

Parentnode.AppendChild (ChildNode);

Her, The Parentnode er HTML -elementet vi ønsker å erklære som foreldre, mens barnebarn er det nyopprettede HTML -elementet som vil bli lagt til foreldroden.

Eksempel: Hvordan legge til HTML -elementer gjennom JavaScript ved hjelp av AppendChild () -metoden

I dette eksemplet vil vi vise deg hvordan du bruker "vedlegg ()”Metode for å legge til HTML -elementene gjennom JavaScript. Først av alt vil vi legge til en overskrift og et avsnitt ved hjelp av

og

HTML -elementer:

Dette er Linuxhint.com

Legge til HTML -elementer gjennom JavaScript.

Dette er hovedparagrafen.

Dette er andre avsnitt.

I neste trinn vil vi lage en ny

element “avsnitt”Ved å bruke“CreateElement ()”Metode for dokumentobjektet:

Utfør ovennevnte program i din favorittkodeditor eller en hvilken som helst online kodende sandkasse; Imidlertid vil vi bruke JSBIN til dette formålet:

Som du ser fra den undergitte utgangen, legges et nytt HTML-element lagt til med tekstinnholdet "Dette er ny node”:

Hvordan legge til HTML -elementer gjennom JavaScript ved hjelp av InsertBefore () -metoden

Hvis du vil sette inn et HTML -element som barneknute før den spesifiserte noden, kan du påkalle "INSERTBEFORE ()”JavaScript -metode.

Syntaks av InsertMethod () -metode

Parentnode.insertbefore (newNode, excisingNode);

Her, "newnode”Er det nyopprettede HTML -elementet du vil legge til,“Eksisterende node”Er elementet før du vil sette inn HTML -elementet ditt, og“Parentnode”Er HTML -elementet du har spesifisert som overordnet node.

Eksempel: Hvordan legge til HTML -elementer gjennom JavaScript ved hjelp av Insertbefore () -metode

I forrige eksempel har vi benyttet oss. Imidlertid kan du også bruke JavaScript "INSERTBEFORE ()”Metode for å legge til et HTML -element før det spesifiserte elementet. Det undergitte eksemplet vil lære deg bruken av “INSERTBEFORE ()”Metode.

For det første vil vi legge til en overskrift og noen avsnitt som følger:

Dette er Linuxhint.com

Legge til HTML -elementer gjennom JavaScript.

Dette er hovedparagrafen.

Dette er andre avsnitt.

Deretter vil vi lage et nytt element "avsnitt”HTML -element, og definerer deretter en barnetekstnode for det:

Utførelse av det ovennevnte programmet vil legge til “avsnitt”HTML før”P1”:

Hvordan slette HTML -elementer gjennom JavaScript ved hjelp av Fjern () -metode

JavaScript “fjerne()”Metode brukes for å slette det spesifiserte HTML -elementet fra Document Object Model (DOM).

Syntaks av fjerne () -metode

Node.fjerne()

Her, “Node”Representerer HTML -elementet du vil slette via JavaScript.

Eksempel: Hvordan slette HTML -elementer gjennom JavaScript ved hjelp av Fjern () -metode

I det undergitte har vi lagt til et HTML-element, et avsnitt, et avsnitt

og et element som omfatter to avsnitt og som barneknuter:

Dette er Linuxhint.com

Legge til HTML -elementer gjennom JavaScript.

Dette er hovedparagrafen.

Dette er andre avsnitt.

Deretter vil vi legge til en knapp og legge ved en "ved trykk”Event Handler. I henhold til følgende kode, når vi vil klikke på "Fjern elementet”-Knappen, den vil påkalle“MyFunction ()”Metode:

Fjern elementet

I “MyFunction ()”Metode, for det første bruker vi“dokument.getElementById”For å finne elementet som vi ønsker å slette ved å spesifisere dets“id”Så vil vi påkalle“fjerne()”Metode:

Den undergitte utgangen betyr at "P1”HTML blir slettet fra vårt JavaScript -program ved hjelp av“fjerne()”Funksjon:

Hvordan slette HTML -elementer gjennom JavaScript ved hjelp av RemoveChild () -metode

I JavaScript, "Fjerning ()”Brukes for å slette en spesifikk barn HTML -node fra et HTML -element.

Syntaks av RemoveChild () -metode

Parentnode.Fjerningsbarn (ChildNode)

Her er parentnoden HTML -elementet vi har spesifisert som et "foreldre”Node, og ChildNode er HTML -elementet vi ønsker å fjerne fra overordnede element.

Eksempel: Hvordan slette HTML -elementer gjennom JavaScript ved hjelp av RemoveChild () -metode

I dette eksemplet vil vi prøve å fjerne barnelementet i vårt definerte HTML -element:

Dette er Linuxhint.com

Legge til HTML -elementer gjennom JavaScript.

Dette er hovedparagrafen.

Dette er andre avsnitt.

For å slette et barneelement, først av alt, må du opprette en "foreldre”HTML -element og spesifiser HTML -elementet som fungerer som foreldre i JavaScript -koden. I vårt tilfelle har vi lagt til “Div1”:

Som du kan se at barnelementet i HTML -elementet blir slettet vellykket:

Konklusjon

For å legge til et HTML -element i JavaScript -programmet ditt, kan du bruke AppendChild () og InsertBefore () -metoden, mens for å slette ethvert spesifikt HTML -element eller et barn HTML -node, fjerne () og fjerne () metoder brukes i henhold til din krav. Denne oppskrivningen diskuterte hvordan du kan legge til eller slette HTML-elementene gjennom JavaScript. Vi har også demonstrert bruken av AppendChild () og InsertBefore () -metoder for å legge til HTML -elementene. Videre er eksempler relatert til fjerne () og fjerne () metoder for å slette HTML -elementene også gitt i denne artikkelen.