Hvordan erstatte et HTML -element ved hjelp av erstatningsmetoden i JavaScript?

Hvordan erstatte et HTML -element ved hjelp av erstatningsmetoden i JavaScript?
JavaScript er mye brukt i utvikling av websiden og bibliotekene som jQuery er veldig nyttig. I gamle teknologier var det nesten umulig å endre eller erstatte et HTML-element ved hjelp av skriptspråk på serversiden, vi klarte bare å endre innholdet inne i elementet gjennom backend-språkene. Men takket være JavaScript, gjorde det livet enklere og tillot oss å dynamisk endre elementet på websiden.

Det gir forskjellige metoder for å oppnå denne funksjonaliteten, men den vi skal se på i dette innlegget er jQuery's Erstatt med() metode.

La oss se dypt på denne metoden.

JQuery erstatning av () metode

I jQuery, den Erstatt med() Funksjon brukes til å erstatte valgte komponenter med nye, og den returnerer komponentene som er erstattet.

De Erstatt med() Metodesyntaks er nevnt nedenfor.

$ (element).erstatte With (newContent, (idx) => )

Argumenter forklaring

Her er forklaringen på argumentene til erstatningsmetode

  • NewContent: Det er innholdet som skal brukes til å erstatte delene som er valgt.
  • (idx) => : Det er funksjonen som returnerer erstatningsinnholdet. Den har også en indeks for argumenter, og denne indeksparameteren brukes til å returnere indeksposisjonen til elementet.

For bedre å forstå hvordan du bruker Erstatt med() funksjon, vurder følgende eksempler.

Eksempel 1

Anta at vi har en element i vår html hvis ID er “Element1”Og med et klikk på en knapp vil vi erstatte den med

HTML -delen ville være slik:

Denne teksten er en div -tag

Og med et klikk på en knapp, vil vi erstatte

Nå, for å konvertere fullstendig tag og dets innhold til

$ (dokument).klar (funksjon ()
$ ("#btn").klikk (funksjon ()
$ ("#element1").Erstatt med("

Element erstattet :)

");
);
);

I eksemplet ovenfor henter vi ganske enkelt først HTML -elementet ved å bruke ID -ene til knapp og div tagg og erstatte deretter Tag med

Tag Bruker Erstatt med() metode.

Produksjon

Du kan være vitne til at elementet ble erstattet med suksess.

Konklusjon

JavaScript's Erstatt med() Metoden brukes til å erstatte ett HTML -element med et annet element i henhold til kravet. Dette Erstatt med() Metoden tar to argumenter, det første argumentet er innholdet du vil bli erstattet med mens det andre argumentet brukes til å returnere indeksposisjonen til innholdet du vil erstatte med. I denne artikkelen har vi diskutert eksemplene på å erstatte det gamle innholdet med det nye ved hjelp av jQuery.