jQuery .html vs .vedlegg

“jQuery”Er et JavaScript -bibliotek og“.html ()”Og“.vedlegg ()”Begge er metodene som brukes i jQuery. Begge metodene utfører forskjellige oppgaver i en JavaScript -funksjon. “.HTML () ”-metode brukes til å erstatte innholdet fullstendig på et grensesnitt på websiden. På den annen side ".vedlegg () ”-metoden brukes til å legge til nytt innhold på slutten av det eksisterende innholdet mens du ikke endrer det forrige innholdet i motsetning til“.html () ”-metode.

Dette er hvordan ".html () ”og“.vedlegg () ”-metoder er forskjellige fra hverandre og utfører forskjellige JavaScript -operasjoner. La oss praktisk talt forstå forskjellen mellom de to ved hjelp av eksempler.

Hvordan bruke “.html () ”-metode?

Det skal være en HTML -kode for å formatere dokumentet først:

Dette er den første linjen

Dette er den andre linjen

Endre innhold

• I ovennevnte kodebit er det to klasser som heter Demo i avsnittsmerker for å legge til innhold på websiden og nedenfor at det er en knapp som heter Endre innhold som vil bli brukt til å endre innholdet gjennom HTML () -metoden.

Det skal være en JavaScript -funksjon for å implementere “.html ()”Metode for dokumentkroppen ovenfor. Følgende er et eksempel på hvordan “.html ()”Metode implementeres i JavaScript:

$ (dokument).klar (funksjon ()

$ ("knapp").klikk (funksjon ()
$ (".demo").HTML ("Dette er den nye teksten");
);
);

• I ovennevnte JavaScript nestet funksjon er det en funksjon som har metoden klar, slik at når HTML -grensesnittet lastes inn på websiden, blir denne funksjonen aktiv.
• Inne i funksjonen er det ".Klikk”Metode for å kalle den funksjonen med elementet“knapp”.
• Inne i det er det innholdet skrevet med ".html”. Dette betyr at når brukeren klikker på "Endre innhold”-Knappen, den vil påkalle“.html ()”Metode, og dette innholdet (“ Dette er den nye teksten ”) skrevet i“.html ()”Metoden vil erstatte det gamle innholdet.

Utgangsgrensesnittet generert gjennom ovennevnte kode vil være følgende:

Slik “.html ()”Metoden fungerer på et grensesnitt på websiden.

Hvordan bruke “.vedlegg () ”-metode?

La oss nå se hvordan ".vedlegg ()”Metoden er annerledes og hvordan den fungerer på websiden. “.vedlegg ()”Metode kan legge til innhold etter det eksisterende innholdet på høyre side av innholdet og også under innholdet. Så vi kan legge til knapper for begge operasjonene:

Hei Verden!

1. Første linje


2. Andre linje


3. Tredje linje

Legg til tekst
Vedleggsliste

• I ovennevnte kodebit er det lagt til tre linjer for å vises på webside -grensesnittet som det eksisterende innholdet på websiden.
• Og så er det to knapper, den ene som legger til teksten (for å utvide innholdet på høyre side av teksten), og den andre for å legge til listen (for å legge til innhold under det eksisterende innholdet).

For å opprette JavaScript -funksjonen for ovennevnte kodebit, bør det være ".vedlegg ()”Metode for både“Legg til tekst”Og“Vedleggsliste”Knapper:

$ (dokument).klar (funksjon ()
$ ("#Button1").klikk (funksjon ()
$ ("#a").vedlegg (" Legg til tekst");
);
$ ("#Button2").klikk (funksjon ()
$ ("ol").vedlegg ("

Vedleggsliste

");
);
);

• I ovennevnte kodebit er det en funksjon som er gitt metoden klar til å påkalle funksjonen når websiden er lastet inn.
• Inne i funksjonen, “.vedlegg ()”Metode brukes for både“knapp1”Og“knapp2”Elementer.

Dette vil generere følgende utgang:

Dette var forskjellen mellom “.html ()”Og“.vedlegg ()”JQuery -metoder.

Konklusjon

“.html ()”Og“.vedlegg ()”Begge er metoder som brukes i“jQuery”. Når “html ()”Metode brukes, den erstatter det gamle innholdet med det nye innholdet som legges til i“html ()”Metode. På den annen side, når "vedlegg ()”Metoden brukes, den legger til innhold etter det eksisterende innholdet uten å endre eller fjerne det gamle innholdet.