Gli aggiornamenti JavaScript sono dotati di nuovi e migliorati metodi e funzionalità. Una di queste nuove funzionalità è il sostituirlo con() metodo. JavaScript è supportato su tutti i browser Web e la maggior parte delle funzioni o metodi di JavaScript sono tutti funzionali su questi browser ad eccezione di Internet Explorer. JavaScript è famoso per aver realizzato soluzioni nuove ed efficienti a vari problemi. IL sostituirlo con() è esattamente questo, un nuovo metodo che è molto meglio dell'approccio banale

Cos'è il metodo sostituita ()

IL sostituirlo con() il metodo viene utilizzato per sostituire un elemento \ nodo dal Dom (Modello a oggetti documenta) con un altro elemento \ nodo. Ora, potresti anche pensare perché abbiamo bisogno di un metodo separato per un'attività che può essere facilmente eseguita utilizzando l'approccio JavaScript tradizionale. Bene, per metterlo in parole semplici, il sostituirlo con() I metodi consentono agli utenti di sostituire gli elementi facendo riferimento direttamente ai nodi figlio. In precedenza, dovevamo fare riferimento al nodo genitore e quindi fare riferimento al nodo figlio per sostituire il nodo figlio.

IL sostituirlo con() Il metodo è supportato da tutti i browser Web moderni tranne Internet Explorer. Puoi ottenere il supporto per Internet Explorer ma poi avrai bisogno Polyfill.

Sintassi
La sintassi di sostituirlo con() Il metodo è il seguente:

Oldnode.sostituto (newnode);

Oldnode: L'elemento o il nodo che deve essere sostituito
newnode: Il nodo o l'elemento che sostituirà il vecchio nodo

Puoi anche aggiungere più nodi utilizzando il sostituirlo con() Metodo come così:

Oldnode.sostituto (newnode1, newnode2, newnode3…);

Ora conosciamo la sintassi del sostituirlo con() metodo, sappiamo cosa dovrebbe fare, ma ancora non sappiamo come usarlo. Quindi, proviamo a usarlo con un esempio.

Esempio
Crea un file HTML con le seguenti righe all'interno del etichetta.

Tutorial Linuxhint

Metodo sostituita () in javascript

Questo è un testo casuale da sostituire

Fare clic per sostituire il nodo

Esaminiamo lo snippet del codice e spieghiamo alcune cose:

• Abbiamo creato un tag "centrale" e abbiamo posizionato tutto al suo interno per centrarlo sulla pagina.
• Abbiamo creato un “div"Con l'ID"Demo".
• Dentro il div, noi abbiamo un "P"Tag con un po 'di testo al suo interno.
• Abbiamo creato un pulsante fuori dal div per sostituire il testo all'interno del P tagga il clic di questo pulsante e lo ha collegato alla funzione "btnClick ()".

Eseguiamo la pagina HTML ed è così che appare:

Creiamo la parte JavaScript del tutorial.

Innanzitutto, creiamo la funzione "btnClick ()", sotto il tag script o in un file di script diverso.

funzione btnClick ()
// Metti i comandi successivi qui

Per cambiare il

etichetta o i suoi nodi figlio, dobbiamo prima ottenere il suo riferimento non appena il pulsante viene premuto. Per ottenere il riferimento del

etichetta che è all'interno del tag, utilizziamo un selettore di query. Dal div ha il id = "demo" Usiamo il seguente comando:

const ptag = documento.QuerySelector ("#demo P");

Ora abbiamo bisogno di un elemento che sostituirà il const newInput = documento.createElement ("input");
Newinput.value = "sostituito il vecchio nodo";

Ora che abbiamo creato un elemento per sostituire il

Tag con, sostituiamolo effettivamente usando il sostituirlo con() Metodo utilizzando il seguente frammento di codice:

ptag.sostituto (NewInput);

Infine, se vogliamo rimuovere il pulsante anche dallo schermo. Per fare questo uso:

const btn = documento.getElementById ("BTN");
btn.rimuovere();

Lo snippet di codice completo sarebbe così:

funzione btnClick ()
const ptag = documento.QuerySelector ("#demo P");
const newInput = documento.createElement ("input");
Newinput.value = "sostituito il vecchio nodo";
ptag.sostituto (NewInput);
const btn = documento.getElementById ("BTN");
btn.rimuovere();

Esegui il file HTML e vedrai questo risultato:

Ora per verificare se il

etichetta è stato effettivamente sostituito, possiamo farlo controllando il codice sorgente con gli strumenti per sviluppatori.

All'inizio è così:

Dopo aver fatto clic sul pulsante diventa così:

Come puoi vedere, il

etichetta viene completamente sostituito con il etichetta, Quando premi il pulsante e ora c'è solo il tag di input all'interno del "#Demo div".

Aggiungere più nodi

Possiamo anche usare il sostituirlo con() Metodo per inserire più nodi in sostituzione del vecchio nodo. Separare più nodi con una virgola ",".

Nell'esempio corrente, proviamo ad aggiungere un semplice nodo di testo insieme al tag di input usando il comando:

ptag.sostituto (newinput, "ciao");

Nota: Se scriviamo solo una stringa, creerà automaticamente un nodo di testo.

Produzione:

Sostituzione di solo negri di childnodes con il metodo sostituibile ()

Una delle caratteristiche principali di sostituirlo con() è sostituire direttamente i neodifini. Supponiamo che non vogliamo rimuovere del tutto il

etichetta Dall'esempio sopra. Forse, vogliamo rimuovere il contenuto all'interno del

etichetta e inserire un tag audace con un po 'di testo in

etichetta. Possiamo farlo facendo riferimento ai nebi figli

etichetta.

Innanzitutto, creiamo il tag audace con:

const newchildnode = documento.createElement ("b");
newchildnode.textContent = "I Am A Bold Tag e il Nuovo neonato di ChildNode";

Ora, sostituiamo il primo nodo figlio del

tag usando la sintassi dell'array come:

ptag.ChildNodes [0].sostituto (newChildNode);

Esegui il codice e l'output è il seguente:

Esaminiamo il codice sorgente dall'opzione Strumenti per sviluppatori del browser per verificare che il

non è stato completamente rimosso piuttosto che il tag audace e il suo contenuto è stato aggiunto all'interno del

Ora, come puoi vedere chiaramente, abbiamo sostituito con successo il nodo figlio del

etichetta e ha aggiunto un altro tag al suo interno come il suo nodo figlio. Questo è tutto per il sostituirlo con() metodo.

Conclusione

IL sostituirlo con() è un metodo davvero utile in JavaScript che può essere utilizzato per sostituire nodi ed elementi con nuovi nodi ed elementi. Questo approccio è decisamente migliore dell'approccio JavaScript tradizionale di riferimento al nodo figlio usando il riferimento del nodo genitore, ciò significa che dobbiamo ottenere anche il riferimento del nodo genitore. Abbiamo imparato la sintassi e il funzionamento del sostituirlo con() Metodo insieme ad esempi e ha confermato la sostituzione osservando il codice sorgente all'interno degli strumenti per sviluppatori del browser.