JQuery, et bibliotek med JavaScript, gjør mange nettprogrammeringsoppgaver ekstremt enkle å oppfylle. Oppgaver som normalt vil ta flere kodelinjer som skal oppnås, for eksempel hendelseshåndtering, animasjoner eller Ajax, kan gjøres i bare en kodeinje. Foruten disse oppgavene, er det mulig å legge til HTML -elementer med stor letthet ved bruk av flere metoder gitt i jQuery.

Denne guiden vil lære deg hvordan du legger til HTML -elementer gjennom jQuery ved å bruke flere metoder ved hjelp av passende eksempler.

Hvordan legge til HTML -elementer gjennom jQuery

JQuery gir følgende fire metoder for å legge til HTML -elementer.

1. vedlegg ()
2. prepend ()
3. før()
4. etter()

Her har vi diskutert alle disse i detalj.

vedlegg () Metode

Appled () -metoden legger til et element som barn i et spesifisert element. Det tar et ubegrenset antall nye HTML -elementer i form av parametere.

Denne metoden fungerer på en måte som HTML -elementene genereres ved hjelp av enten tekst/HTML, jQuery eller JavaScript. Etterpå blir de nylig genererte elementene vedlagt som det siste barnet ved hjelp av vedlegg () -metoden.

Eksempel

Anta at du vil legge til nye elementer på slutten av en bestilt liste ved hjelp av Append () -metoden. Bruk følgende kode.

Html

1. Punkt


2. Punkt


3. Punkt

I koden ovenfor har vi laget en knapp og også opprettet en bestilt liste.

jQuery

Ved hjelp av jQuery append () -metoden vil vi legge til et annet element i listen ved å klikke på knappen.

Produksjon

Det var tre elementer på listen, opprinnelig.

Anta at du klikker på knappen tre ganger.

Tre elementer til er lagt til listen.

prepend () -metode

Denne metoden fungerer på en lignende måte som metoden ved append () med den eneste forskjellen at i stedet for å legge til de nyopprettede HTML -elementene, vil den forberede elementene som det første barnet. Det tar også et ubegrenset antall nye HTML -elementer i form av parametere.

Eksempel

Vi vil bruke det samme eksemplet som ovenfor og se hvordan prepend () -metoden fungerer.

jQuery

I ovennevnte kodebit bruker vi prepend () -metoden for å legge til elementer i starten av den bestilte listen.

Produksjon

Opprinnelig var det tre elementer på listen.

Anta at du klikker på knappen to ganger.

To elementer legges til ved starten av den bestilte listen.

før () -metode

Før () -metoden tar et ubegrenset antall nye HTML -elementer i form av parametere. Denne metoden fungerer på en måte som HTML -elementene genereres ved hjelp av enten tekst/HTML, jQuery eller JavaScript og blir lagt til før et allerede eksisterende element som søsken.

Eksempel

Anta at du vil legge til en overskrift før et avsnitt ved å klikke på en knapp. Dette kan gjøres ved hjelp av før () -metoden.

Html

Noe avsnitt.

I koden ovenfor har vi opprettet

, og elementer. Nå bruker vi før () -metoden for å legge til en overskrift før avsnittet.

jQuery

Produksjon

Før () -metoden fungerer som den skal

Etter () -metode

Denne metoden tar et ubegrenset antall nye HTML -elementer i form av parametere. Denne metoden fungerer på en lignende måte som metoden før () med den eneste forskjellen er at de nye HTML -elementene blir lagt til som søsken, men etter de allerede eksisterende elementene.

Eksempel

Anta at du vil legge til et avsnitt etter en overskrift ved å klikke på en knapp. Dette kan gjøres ved hjelp av After () -metoden.

Html

Overskrift

I koden ovenfor har vi opprettet

, og elementer, og ved bruk av etter () -metoden vil et avsnitt bli lagt til etter overskriften.

jQuery

Produksjon

Lagt til et avsnitt etter overskriften.

Konklusjon

HTML -elementer kan legges til ved hjelp av forskjellige metoder levert av jQuery som vedlegg (), prepend (), før (), og etter (). Alle disse metodene tar et ubegrenset antall nye HTML -elementer i form av parametere, og når elementene er generert, blir de lagt til sine passende posisjoner med hensyn til metoden som brukes. Alle disse metodene blir diskutert i dybden i denne guiden, sammen med relevante eksempler.