JavaScript -Updates sind mit neuen und verbesserten Methoden und Funktionen ausgestattet. Eine dieser neuen Funktionen ist die ersetzen mit() Methode. JavaScript wird in allen Webbrowsern unterstützt, und die meisten Funktionen oder Methoden von JavaScript sind in diesen Browsern mit Ausnahme des Internet Explorer funktional. JavaScript ist berühmt für neue und effizientere Lösungen für verschiedene Probleme. Der ersetzen mit() Ist genau das eine neue Methode, die weitaus besser ist als der triviale Ansatz

Was ist Ersatzwith () -Methode

Der ersetzen mit() Methode wird verwendet, um eine zu ersetzen Element \ Knoten von dem Dom (Dokumentobjektmodell) mit einem anderen Element \ Knoten. Jetzt können Sie auch überlegen, warum wir eine separate Methode für eine Aufgabe benötigen, die mit dem herkömmlichen JavaScript -Ansatz problemlos erledigt werden kann. Nun, um es in einfache Worte zu setzen, die ersetzen mit() Mit Methoden können die Benutzer Elemente ersetzen, indem sie direkt auf die untergeordneten Knoten verweisen. Zuvor mussten wir uns auf den übergeordneten Knoten beziehen und dann auf den untergeordneten Knoten verweisen, um den untergeordneten Knoten zu ersetzen.

Der ersetzen mit() Die Methode wird von allen modernen Webbrowsern außer dem Internet Explorer unterstützt. Sie können die Unterstützung für den Internet Explorer erhalten, aber dann benötigen Sie eine Polyfill.

Syntax
Die Syntax von ersetzen mit() Methode ist wie folgt:

Oldnode.ersetzen mit (newnode);

Oldnode: Das Element oder der Knoten, der ersetzt werden soll
Newnode: Der Knoten oder Element, das den alten Knoten ersetzt

Sie können auch mehrere Knoten mit dem anhängen ersetzen mit() Methode wie SO:

Oldnode.ersetzen mit (newnode1, newnode2, newnode3…);

Jetzt kennen wir die Syntax der ersetzen mit() Methode wissen wir, was es tun soll, aber wir wissen immer noch nicht, wie wir es verwenden sollen. Versuchen wir es also mit einem Beispiel verwenden.

Beispiel
Erstellen Sie eine HTML -Datei mit den folgenden Zeilen innerhalb der Schild.

LinuxHint -Tutorial

Ersetzen Sie with () Methode in JavaScript

Dies ist ein zufälliger Text, der ersetzt werden muss

Klicken Sie hier, um den Knoten zu ersetzen

Gehen wir über das Code -Snippet und erklären Sie ein paar Dinge:

• Wir haben ein „Center“ -Tag erstellt und alles darin platziert, um es auf der Seite zu zentrieren.
• Wir haben eine "erstellt"div"Mit der ID"Demo”.
• In der div, wir haben ein "P”Tag mit etwas Text darin.
• Wir haben eine Schaltfläche außerhalb der erstellt div Um den Text im Inneren der zu ersetzen P Tag auf die Schaltfläche Klicken und verknüpft mit der Funktion “btnclick ()”.

Lassen Sie uns die HTML -Seite ausführen und so sieht sie aus:

Lassen Sie uns den JavaScript -Teil des Tutorials erstellen.

Erstens erstellen wir die Funktion “btnclick ()", unter dem Skript -Tag oder in einer anderen Skriptdatei.

Funktion btnclick ()
// Geben Sie die späteren Befehle hier hinein

Um es zu ändern

Schild Oder seine untergeordneten Knoten müssen wir zunächst seine Referenz erhalten, sobald die Taste gedrückt wird. Um die Referenz der Referenz zu erhalten

Schild Welches ist im Inneren der Tag, wir verwenden einen Abfragelektor. Seit der div hat die id = "Demo" Wir verwenden den folgenden Befehl:

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

Jetzt brauchen wir ein Element, das das ersetzt const newInput = dokument.CreateLement ("Eingabe");
NewInput.value = "ersetzt den alten Knoten";

Jetzt, wo wir ein Element erstellt haben, um das zu ersetzen

Tag mit, ersetzen wir es tatsächlich mit dem ersetzen mit() Methode mit dem folgenden Code -Snippet:

PTAG.ersetzen mit (NewInput);

Zuletzt, wenn wir auch die Taste entfernen möchten, vom Bildschirm. Um diese Verwendung zu tun:

const btn = dokument.GetElementById ("Btn");
Btn.entfernen();

Der komplette Code -Snippet würde so aussehen:

Funktion btnclick ()
const ptag = dokument.QuerySelector ("#Demo P");
const newInput = dokument.CreateLement ("Eingabe");
NewInput.value = "ersetzt den alten Knoten";
PTAG.ersetzen mit (NewInput);
const btn = dokument.GetElementById ("Btn");
Btn.entfernen();

Führen Sie die HTML -Datei aus und Sie werden dieses Ergebnis sehen:

Nun, um zu überprüfen, ob die

Schild Wurde tatsächlich ersetzt, können wir dies tun, indem wir den Quellcode mit den Entwickler -Tools überprüfen.

Zuerst ist es so:

Nach dem Klicken auf die Schaltfläche wird es wie folgt:

Wie Sie sehen können, die

Schild wird vollständig durch die ersetzt Schild, Wenn wir die Taste drücken und jetzt befindet sich nur das Eingabetik "#Demo div".

Anhängen mehrerer Knoten

Wir können auch die verwenden ersetzen mit() Methode zum Einfügen mehrerer Knoten in den Ersatz für den alten Knoten einfügen. Trennende mehrere Knoten mit einem Komma ",", ",", ",", ",", ",".

Versuchen wir im aktuellen Beispiel, einen einfachen Textknoten zusammen mit dem Eingabetag mit dem Befehl hinzuzufügen:

PTAG.Ersetzen Sie (NewInput, "Hallo");

Notiz: Wenn wir nur eine Zeichenfolge schreiben, wird automatisch einen Textknoten erstellt.

Ausgang:

Ersetzen von nur Childnodes durch Ersatzwith () -Methode

Eine der Hauptmerkmale von ersetzen mit() ist die Childnodes direkt zu ersetzen. Angenommen, wir wollen die nicht vollständig entfernen

Schild Aus dem obigen Beispiel. Vielleicht möchten wir den Inhalt im Inhalt entfernen

Schild und einfügen a mutiges Tag mit etwas Text in der

Schild. Wir können dies tun, indem wir auf die Childnoden der des Verweisens der

Schild.

Lassen Sie uns zunächst das mutige Tag erstellen mit:

const NewChildnode = Dokument.CreateLement ("B");
NewChildnode.textContent = "Ich bin ein mutiges Tag und der neue Childnode";

Lassen Sie uns nun den ersten untergeordneten Knoten der Kinder ersetzen

Tag mit der Array -Syntax wie:

PTAG.Childnodes [0].ersetzen mit (NewChildnode);

Führen Sie den Code aus und die Ausgabe lautet wie folgt:

Untersuchen wir den Quellcode aus der Option Developer Tools des Browsers, um zu überprüfen, ob die

war eher vollständig entfernt als die mutiges Tag und sein Inhalt wurde im Inneren der hinzugefügt

Nun, wie Sie deutlich sehen können, haben wir den Kinderknoten der Kinder erfolgreich ersetzt

Schild und fügte ein weiteres Tag hinzu darin in ihm als Kinderknoten. Das ist es für die ersetzen mit() Methode.

Abschluss

Der ersetzen mit() ist eine wirklich nützliche Methode in JavaScript, mit der Knoten und Elemente durch neue Knoten und Elemente ersetzt werden können. Dieser Ansatz ist definitiv besser als der traditionelle JavaScript -Ansatz, der sich auf den untergeordneten Knoten bezieht. Wir haben die Syntax und Arbeiten des ersetzen mit() Methode zusammen mit Beispielen und bestätigte den Ersatz, indem Sie den Quellcode in den Entwicklertools des Browsers betrachteten.