JavaScript legger til data til DIV
Hvordan legge til data til Div i JavaScript?
Følgende tilnærminger kan brukes til å legge til data til DIV i JavaScript:
- “indrehtml”Eiendom.
- “INSERTADJACENTHTML ()”Metode.
- “vedlegg ()”Metode.
- “jQuery" nærme seg.
Tilnærming 1: Legg til data til DIV i JavaScript ved hjelp av InnerHTML -egenskapen
“indrehtml”Eiendom returnerer elementets indre HTML -innhold.Denne tilnærmingen kan brukes for å legge til data til det inkluderte bildet og knappen i "div”Element på knappeklikk.
Syntaks
element.indrehtmlI den gitte syntaks:
- “element”Henviser til elementet som HTML -innholdet vil bli returnert.
Eksempel
La oss se på følgende kodelinjer:
I koden ovenfor:
- Spesifiser “div”Element med det spesifiserte”id”.
- Etter det, inkluder et bilde i Div -elementet.
- Lag også en knapp i Div -elementet som har et vedlagt “ved trykk”Hendelse som omdirigerer til funksjonen appenddata ().
Gå videre til JavaScript -delen av koden:
I JS -delen av koden, følg de nedenfor oppgitte trinnene:
- Erklære en funksjon som heter “appenddata ()”.
- I sin definisjon få tilgang til “div”Element fra sin ID ved å bruke“dokument.getElementById ()”Metode.
- Til slutt, bruk "indrehtml”Eiendom for å legge til den uttalte meldingen sammen med det medfølgende bildet og opprettet -knappen i“div”.
Produksjon
Det kan observeres i output output at den oppgitte meldingen er vedlagt med bildet på knappeklikk.
Tilnærming 2: Legg til data til DIV i JavaScript ved hjelp av INSERTADJACENTHTML () -metoden
“INSERTADJACENTHTML ()”Metode setter inn HTML -data i den spesifiserte posisjonen.Denne metoden kan brukes til å legge til dataene på slutten av "div”Når du velger et spesifikt alternativ.
Syntaks
element.insertadJacenthtml (posisjon, html)I syntaks ovenfor:
- “posisjon”Refererer til posisjonen i forhold til elementet.
- “html”Peker på HTML som skal settes inn.
Eksempel
Ta en titt på følgende kodebit:
Er JavaScript et programmeringsspråk?
Ja
Nei
I ovennevnte HTML -kode:
- Gjenta de diskuterte trinnene for å inkludere “div”Element som har det spesifiserte”id”.
- Inkluder også den spesifiserte overskriften i "" stikkord.
- Etter det, inkluderer to “radio”Knapper med en som påkaller funksjonen AppendData (). Dette vil resultere i å legge til dataene bare ved valg av alternativ "Ja”.
Gå videre til JavaScript -delen av koden:
I ovennevnte JS -kode, følg disse trinnene:
- Erklære en funksjon som heter “appenddata ()”.
- I sin definisjon få tilgang til “div”Element på samme måte ved å bruke“dokument.getElementById ()”Metode.
- Til slutt, bruk "INSERTADJACENTHTML ()”Metode ved å spesifisere“posisjon”Som den første parameteren for å legge til de spesifiserte dataene. I dette scenariet vil dataene bli lagt ved slutten.
Produksjon
I ovennevnte utgang er det tydelig at "suksess”Meldingen legges bare til ved å klikke på alternativet“Ja”.
Tilnærming 3: Legg til data til DIV i JavaScript ved hjelp av AppendChild () -metoden
“vedlegg ()”Metode legger til et nodeelement som elementets siste barn. Denne tilnærmingen kan brukes til å legge til dataene på samme måte på slutten på knappeklikk.
Syntaks
element.AppendChild (node)I den gitte syntaks:
- “Node”Indikerer at noden skal legges ved.
Sideanmerkning: En ekstra metode “CreateTextNode ()”Vil også bli brukt i eksemplet nedenfor. Det brukes ganske enkelt for å lage en tekstnode.
Eksempel
La oss følge det undergitte eksemplet nedenfor trinn for trinn:
JavaScript
I ovennevnte HTML -kode:
- Husk de diskuterte tilnærmingene for å inkludere “div”Element som har det spesifiserte”id”Og en overskrift.
- På samme måte, ta med en knapp med "ved trykk”Arrangementet vedlagt som vil omdirigere til funksjonen AppendData ().
La oss følge den uttalte JavaScript -delen av koden:
I denne delen av koden, utfør følgende trinn:
- Definere en funksjon som heter “appenddata ()”.
- I sin definisjon får du tilgang til "div”Element som diskutert.
- I neste trinn, bruk "CreateTextNode ()”Metode for å lage den spesifiserte tekstnoden.
- Til slutt, legg til den opprettede tekstnoden på slutten av "div”.
Produksjon
I utgangen er det tydelig at det resulterende avsnitt er vedlagt "div”På knappeklikk.
Tilnærming 4: Legg til data til DIV i JavaScript ved hjelp av jQuery -tilnærming
“jQuery”Tilnærming kan brukes for å få tilgang til“div”Element direkte og legg en overskrift i det (DIV) på knappeklikk.
Eksempel
La oss følge det undergitte eksemplet nedenfor trinn for trinn:
Innholdet på dette nettstedet er:
I koden ovenfor, følg de nedenfor angitte trinnene:
- Inkluder jQuery -biblioteket for å bruke metodene.
- Gjenopplive trinnene for å spesifisere “div”Element med det spesifiserte”id”.
- Innen "div”, Inkluder den uttalte overskriften og en“knapp" med en "ved trykk”Hendelse som påkaller funksjonen AppendData ().
La oss fortsette til JavaScript -delen av koden:
I ovennevnte JS -del av koden, utfør følgende trinn:
- Definere en funksjon som heter “appenddata ()”.
- I sin definisjon får du tilgang til Div -elementet direkte av dets “id”.
- Etter det, bruk "vedlegg ()”Metode til den tilgang til”div”Og inkluderer den uttalte overskriften i den.
Produksjon
I utdataene fører knappeklikket til å legge til den resulterende overskriften i "div”.
Denne oppskrivningen demonstrerte tilnærmingene for å legge til data til DIV i JavaScript.
Konklusjon
“indrehtml”Eiendom,“INSERTADJACENTHTML ()”Metode,“vedlegg ()”Metode eller“jQuery”Tilnærming kan brukes til å legge til data til DIV i JavaScript. InnerHTML -egenskapen kan brukes til å legge dataene til det medfølgende bildet og en knapp i "div”Element på knappeklikk. InsertadJacenthtml () -metoden kan brukes for å legge til dataene med hensyn til den spesifiserte posisjonen som dens parameter. AppendChild () -metoden i kombinasjon med “CreateTextNode ()”Metode kan først brukes til å lage en tekstnode først og deretter legge den til slutten av DIV. JQuery -tilnærmingen kan brukes til å hente Div -elementet direkte og legge til en overskrift i den på knappeklikk. Denne bloggen forklarte å legge til data til Div i JavaScript.