JavaScript -oppdateringer kommer med nye og forbedrede metoder og funksjoner. En av disse nye funksjonene er Erstatt med() metode. JavaScript støttes på alle nettlesere, og de fleste av funksjonene eller metodene til JavaScript er alle funksjonelle på disse nettleserne med unntak av Internet Explorer. JavaScript er kjent for å komme med nye og mer effektive løsninger på forskjellige problemer. De Erstatt med() er akkurat det, en ny metode som er langt bedre enn den trivielle tilnærmingen

Hva er erstattet med () metode

De Erstatt med() metoden brukes til å erstatte en element \ node fra Dom (Dokumentobjektmodell) med en annen element \ node. Nå kan du like gjerne tenke hvorfor trenger vi en egen metode til en oppgave som enkelt kan gjøres ved hjelp av den tradisjonelle JavaScript -tilnærmingen. Vel, for å si det med enkle ord, Erstatt med() Metoder lar brukerne erstatte elementer ved direkte å henvise til barneknuter. Tidligere måtte vi henvise til overordnede noden og deretter henvise til barneknuten for å erstatte barneknuten.

De Erstatt med() Metoden støttes av alle moderne nettlesere unntatt Internet Explorer. Du kan få støtte til Internet Explorer, men da vil du kreve en Polyfill.

Syntaks
Syntaksen til Erstatt med() Metoden er som følger:

oldnode.erstatte With (newNode);

oldnode: Elementet eller noden som skal byttes ut
newnode: Noden eller elementet som vil erstatte den gamle noden

Du kan også legge til flere noder ved hjelp av Erstatt med() Metode som det:

oldnode.erstatte With (newNode1, newNode2, newNode3 ...);

Nå kjenner vi syntaksen til Erstatt med() Metode, vi vet hva den skal gjøre, men vi vet fortsatt ikke hvordan vi skal bruke den. Så la oss prøve å bruke det med et eksempel.

Eksempel
Opprett en HTML -fil med følgende linjer inne i stikkord.

Linuxhint Tutorial

erstattet () metode i JavaScript

Dette er en tilfeldig tekst som skal erstattes

Klikk for å erstatte noden

La oss gå over kodebiten og forklare noen få ting:

• Vi opprettet en "senter" -kode og plasserte alt inni det for å sentrere det på siden.
• Vi opprettet en “div”Med ID”demo”.
• Inne i div, vi har en "p”Tag med litt tekst inni den.
• Vi opprettet en knapp utenfor div For å erstatte teksten inne i p Merk på klikket på denne knappen og koblet den til funksjonen "btnclick ()”.

La oss kjøre HTML -siden, og det er slik den ser ut:

La oss opprette JavaScript -delen av opplæringen.

Først oppretter vi funksjonen "btnclick ()", under Skriptkode eller i en annen skriptfil.

funksjon btnclick ()
// legg de senere kommandoene her inne

Å endre

stikkord eller barneknuter, vi må først få referanse så snart knappen er trykket på. For å få referansen til

stikkord som er inne i Tag, vi bruker en spørringsvelger. Siden div har id = “Demo” Vi bruker følgende kommando:

const ptag = dokument.QuerySelector ("#Demo P");

Nå trenger vi et element som vil erstatte const newInput = dokument.CreateElement ("input");
NewInput.verdi = "erstattet den gamle noden";

Nå som vi har laget et element for å erstatte

Tag med, la oss faktisk erstatte den ved hjelp av Erstatt med() Metode ved å bruke følgende kodebit:

PTAG.erstatte With (NewInput);

Til slutt, hvis vi også vil fjerne knappen fra skjermen. Å gjøre den bruken:

const btn = dokument.getElementById ("BTN");
btn.fjerne();

Det komplette kodebiten vil se slik ut:

funksjon btnclick ()
const ptag = dokument.QuerySelector ("#Demo P");
const newInput = dokument.CreateElement ("input");
NewInput.verdi = "erstattet den gamle noden";
PTAG.erstatte With (NewInput);
const btn = dokument.getElementById ("BTN");
btn.fjerne();

Kjør HTML -filen, og du vil se dette resultatet:

Nå for å sjekke om

stikkord ble faktisk erstattet vi kan gjøre det ved å sjekke kildekoden med utviklerverktøyene.

Til å begynne med er det slik:

Etter å ha klikket på knappen blir det slik:

Som du kan se,

stikkord blir helt erstattet med stikkord, Når vi trykker på knappen og nå er det bare inndatakoden inne i “#Demo Div”.

Legg til flere noder

Vi kan også bruke Erstatt med() Metode for å sette inn flere noder i erstatning for den gamle noden. Skill flere noder med komma ",".

La oss prøve å legge til en enkel tekstnode i det nåværende eksemplet ved å bruke kommandoen:

PTAG.erstatte With (NewInput, "Hello");

Merk: Hvis vi bare skriver en streng, oppretter den automatisk en tekstnode.

Produksjon:

Erstatte bare barneknoder med erstatningsmetode

En av hovedtrekkene i Erstatt med() er å erstatte barnelodene direkte. Anta at vi ikke helt vil fjerne

stikkord Fra eksemplet ovenfor. Kanskje vi vil fjerne innholdet inne i

stikkord og sett inn a fet tag med litt tekst i

stikkord. Vi kan gjøre det ved å henvise til barneknodene til

stikkord.

Først, la oss lage den dristige taggen med:

const newChildNode = dokument.CreateElement ("B");
newchildnode.textContent = "Jeg er en dristig tag og den nye ChildNode";

La oss nå erstatte den første barneknoden til

TAG ved å bruke matrise -syntaks som:

PTAG.barnebarn [0].erstatte With (NewchildNode);

Kjør koden og utgangen er som følger:

La oss undersøke kildekoden fra alternativet Developer Tools

ble ikke helt fjernet i stedet for fet tag og innholdet ble lagt til inne i

Nå, som du tydelig kan se, har vi erstattet barneknoden til

stikkord og la til en annen tag Inni den som barneknoden. Det er det for Erstatt med() metode.

Konklusjon

De Erstatt med() er en veldig nyttig metode i JavaScript som kan brukes til å erstatte noder og elementer med nye noder og elementer. Denne tilnærmingen er definitivt bedre enn den tradisjonelle JavaScript -tilnærmingen for å referere til barneknuten ved å bruke referansen til overordnede noden, dette betyr at vi også må få referansen til overordnede noden. Vi lærte syntaks og arbeid av Erstatt med() Metode sammen med eksempler og bekreftet erstatningen ved å se på kildekoden i nettleserens utviklerverktøy.