HTML -elementer manipulasjon gjennom JavaScript
Denne oppskrivningen vil diskutere manipulering av HTML -elementer gjennom JavaScript. Vi vil også forklare prosedyren for å legge til HTML -elementer, legge til HTML -elementer, endre innhold av HTML -elementer, finne og få HTML -elementer og fjerne HTML -elementer og deres barneknuter. Videre vil eksemplene relatert til appendchild (), insertBefore (), InnerHTML -egenskap, getElementById (), getElementByClassName (), QueryStectorAll (), Fjern () og RemoveChild () metoder vil bli gitt. 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 lagt til overordnede noden.
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 () -metode
Hvis du vil legge til 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 endre innhold av HTML -elementer gjennom JavaScript ved hjelp av InnerHTML -egenskapen
HTML DOM tillater deg å endre HTML -innholdet ved å bruke "indrehtml”Eiendom. “indrehtml”Brukes vanligvis på websider for å generere dynamisk HTML -innhold som kommentarskjemaer, registreringsskjemaer og lenker.
Syntaks av Innerhtml JavaScript -eiendom
element.INNERHTML = verdiHer, “element”Er HTML -elementet du har valgt for å endre innholdet, og“verdi”Er innholdet vi vil sette.
Eksempel 1: Endre innhold av HTML -elementer gjennom JavaScript
Dette eksemplet vil vise deg hvordan du bruker "indrehtml”JavaScript -egenskap for å endre et HTML -elementets innhold. For det første vil vi legge til et overskriftselement med
overskriftskode og et avsnitt med
HTML -tag:
Endre HTML -elementer ved hjelp av JavaScript
En teststreng
Nå ønsker vi å endre innholdet i “”Element som har ID”P1”. For å gjøre det, bruker vi “Dokumentet.getElementById () ”-metode for å få det spesifiserte elementet. Etter det vil vi sette innholdet i vår
element til “Dette er Linuxhint.com”:
Vi har endret innholdet i ovennevnte avsnitt
Sjekk ut den undergitte utdata, som vi fikk fra å utføre det ovennevnte programmet:
Hvordan finne og få HTML -elementer av ID gjennom JavaScript
De fleste av JavaScript -utviklerne benyttet seg av getElementById () Metode for å finne og få HTML -elementer som har unike ID -er. Hvis du har passert en ID som ikke tilhører noe HTML -element, vil metoden GetElementById () vise nullverdien.
Syntaks av getElementById () -metode
dokument.getElementById (ElementId)Her, "ElementId”Representerer den unike IDen til HTML -elementet som du vil finne og få i JavaScript -koden din.
Eksempel: Finn og få HTML -elementer etter ID gjennom JavaScript
I det følgende eksempel vil vi legge til HTML -elementer som en overskrift med
tag og tre avsnittselementer med
stikkord. Merk at vi også har lagt til “ids”Med avsnittelementene:
Dette er Linuxhint.com
Finn og få HTML -elementer etter ID i JavaScript
Dette er et JavaScript -program som bruker metoden "getElementsById"
I neste trinn vil vi finne og få elementet som har ID “P1”Ved å bruke“dokument.getElementById ()”Metode. Etter ding så vil vi endre innholdet i det hentede HTML -elementet:
Hvordan finne og få HTML -elementer etter klassenavn gjennom JavaScript
“getElementsByClassName ()”Metode brukes til å finne og få HTML -elementer som har samme klasse. Når du prøver å få et HTML -element ved å bruke klassenavnet, vil JavaScript -tolken returnere alle objekter som tilhører samme klasse. Etter det kan du utføre spesifikke operasjoner på disse HTML -elementene.
Syntaks av getElementsByClassName () -metode
dokument.getElementsByClassName (ClassName)Her, "klassenavn”Representerer klassenavnet på HTML -elementene som du må finne og få i programmet ditt.
Eksempel: Finn og få HTML -elementer etter klassenavn gjennom JavaScript
I det følgende eksempel har vi lagt til en overskrift og noen avsnittelementer med klassenavnet "C1”:
Dette er Linuxhint.com
Finn og få HTML -elementer etter klassenavn i JavaScript
Tekst i første paragrpah
Tekst i andre ledd
Deretter vil vi søke etter HTML -elementene som har “C1”Som deres klasse ved å bruke metoden GetElementSByClassName () og lagre samlingene til objektene i“en”:
Her er utdataene vi fikk fra å utføre det ovennevnte JavaScript-programmet:
Hvordan finne og få HTML -elementer av CSS -velgeren gjennom JavaScript
I HTML, The QuerySelectorAll () Metode returnerer et statisk nodelistobjekt som omfatter en samling av barneelementene i et element matchet med de spesifiserte CSS -velgerne. Indeksnumre brukes til å finne og få nodene, og starter 0.
Syntaks av QuerySelectorAll () -metoden
element.QuerySelectorAll (Selectors)QuerySelectorAll () -metoden tar “velgere”Som et argument; En DOM -streng omfatter en eller flere gyldige CSS -velgere.
Eksempel: Finn og få HTML -elementer av CSS -velgeren gjennom JavaScript
I det undergitte JavaScript-programmet har vi brukt QuerySelectorAll () -metoden for å finne og få avsnitt HTML-elementene som har “C1”Som deres klassenavn:
Dette er Linuxhint.com
Finn og få HTML -elementer etter klassenavn i JavaScript
Tekst i første paragrpah
Tekst i andre ledd
Sjekk ut utdataene fra JavaScript QuerySectorAll () -metoden:
Utførelse av det ovennevnte JavaScript-programmet vil vise følgende utgang:
Hvordan fjerne 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: Fjern 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:
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 fjerne barn 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.
Fjern barn 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
Document Object Model (DOM) i JavaScript er et utviklergrensesnitt som tillater deg å manipulere design, struktur og innhold i nettstedets HTML -elementer. Denne oppskrivningen diskuterte manipulering av HTML-elementer gjennom JavaScript. Vi har også forklart prosedyren for å legge til HTML -elementer, legge til HTML -elementer, endre innhold av HTML -elementer, finne og få HTML -elementer og fjerne HTML -elementer og deres barneknuter. Videre er eksemplene relatert til appendchild (), insertBefore (), InnerHTML -egenskap, getElementById (), getElementsByClassName (), QueryStectorAll (), Fjern () og RemoveChild () metoder også gitt.