Aktualizacje JavaScript zawierają nowe i ulepszone metody i funkcje. Jedną z tych nowych funkcji jest zamienić() metoda. JavaScript jest obsługiwany we wszystkich przeglądarkach internetowych, a większość funkcji lub metod JavaScript działa w tych przeglądarkach, z wyjątkiem Internet Explorer. JavaScript słynie z nowych i bardziej wydajnych rozwiązań różnych problemów. zamienić() jest dokładnie taka nowa metoda, która jest znacznie lepsza niż trywialne podejście

Co to jest metoda zastępcza ()

zamienić() Metoda służy do wymiany element \ node z Dom (Model obiektu dokumentu) z innym element \ node. Teraz możesz równie dobrze pomyśleć, dlaczego potrzebujemy osobnej metody do zadania, które można łatwo wykonać za pomocą tradycyjnego podejścia JavaScript. Mówiąc to prosto, zamienić() Metody pozwalają użytkownikom zastąpić elementy poprzez bezpośrednie odwołanie się do węzłów dziecięcych. Wcześniej musieliśmy odnieść się do węzła nadrzędnego, a następnie odwołać się do węzła dziecięcego, aby zastąpić węzeł dziecięcy.

zamienić() Metoda jest obsługiwana przez wszystkie nowoczesne przeglądarki internetowe oprócz Internet Explorer. Możesz uzyskać obsługę Internet Explorer, ale wtedy będziesz potrzebować Polyfill.

Składnia
Składnia zamienić() Metoda jest następująca:

Oldnode.zamień (newNode);

Oldnode: Element lub węzeł, który ma zostać wymieniony
newNode: Węzeł lub element, który zastąpi stary węzeł

Możesz także dołączyć wiele węzłów za pomocą zamienić() metoda taka:

Oldnode.ReplainWith (newNode1, NewNode2, NewNode3…);

Teraz znamy składnię zamienić() Metoda, wiemy, co ma zrobić, ale nadal nie wiemy, jak z niej korzystać. Więc spróbujmy użyć go z przykładem.

Przykład
Utwórz plik HTML z następującymi wierszami wewnątrz etykietka.

Samouczek Linuxhint

Metoda zastąpiona () w JavaScript

Jest to losowy tekst do wymiany

Kliknij, aby zastąpić węzeł

Przejrzyjmy fragment kodu i wyjaśnij kilka rzeczy:

• Stworzyliśmy znacznik „środkowy” i umieściliśmy wszystko w nim, aby wyśrodkować na stronie.
• Stworzyliśmy „div”Z identyfikatorem„próbny".
• W środku div, mamy "P„Zagadnij w jakiś tekst.
• Utworzyliśmy przycisk na zewnątrz div Aby wymienić tekst wewnątrz P Tag na kliknięciu tego przycisku i połącz go z funkcją „btnclick ()".

Uruchommy stronę HTML i tak to wygląda:

Utwórzmy część samouczka JavaScript.

Najpierw tworzymy funkcję „btnclick ()", pod Tag skryptu lub w innym pliku skryptu.

funkcja btnclick ()
// Umieść późniejsze polecenia w środku

Żeby zmienić

etykietka lub jego dziecięce węzły, najpierw musimy uzyskać odniesienie, gdy tylko przycisk zostanie naciśnięty. Aby uzyskać odniesienie do

etykietka który jest wewnątrz tag, używamy selektora zapytania. Od div zawiera id = „demo” Używamy następującego polecenia:

const Ptag = Dokument.querySelelect („#demo p”);

Teraz potrzebujemy elementu, który zastąpi const newinput = dokument.createElement („Wprowadzenie”);
NEWINPUT.wartość = „Wymienił stary węzeł”;

Teraz, gdy utworzyliśmy element do wymiany

tag za pomocą, wymieńmy go za pomocą zamienić() Metoda przy użyciu następującego fragmentu kodu:

Ptag.zastąpić (newInput);

Na koniec, jeśli chcemy usunąć również przycisk z ekranu. Do tego użycia:

const btn = dokument.getElementById („btn”);
Btn.usunąć();

Pełny fragment kodu wyglądałby tak:

funkcja btnclick ()
const Ptag = Dokument.querySelelect („#demo p”);
const newinput = dokument.createElement („Wprowadzenie”);
NEWINPUT.wartość = „Wymienił stary węzeł”;
Ptag.zastąpić (newInput);
const btn = dokument.getElementById („btn”);
Btn.usunąć();

Uruchom plik HTML, a zobaczysz ten wynik:

Teraz sprawdzić, czy

etykietka Został faktycznie zastąpiony, możemy to zrobić, sprawdzając kod źródłowy narzędziami programistów.

Na początku tak jest:

Po kliknięciu przycisku staje się tak:

Jak widać,

etykietka zostaje całkowicie zastąpiony etykietka, Po naciśnięciu przycisku, a teraz jest tylko znacznik wejściowy w środku „#Demo Div”.

Dołączenie wielu węzłów

Możemy również użyć zamienić() metoda wstawienia wielu węzłów w wymianie starego węzła. Oddziel wiele węzłów przecinkiem „”,.

W bieżącym przykładzie spróbujmy dodać prosty węzeł tekstowy wraz z znacznikiem wejściowym za pomocą polecenia:

Ptag.zamieńWith (NewInput, „Hello”);

Notatka: Jeśli napiszemy tylko ciąg, automatycznie utworzy on węzeł tekstowy.

Wyjście:

Zastąpienie tylko metody zamiennej ()

Jedna z głównych cech zamienić() ma bezpośrednio zastąpić childnodes. Załóżmy, że nie chcemy całkowicie usuwać

etykietka Z powyższego przykładu. Może chcemy usunąć zawartość wewnątrz

etykietka i wstaw BOLD TAG z pewnym tekstem w

etykietka. Możemy to zrobić, odwołując się do dzieci

etykietka.

Najpierw stwórzmy odważny tag z:

const newchildNode = dokument.CreateElement („B”);
NewchildNode.textContent = "Jestem odważnym tagiem i nowym childnode";

Teraz wymieńmy pierwszy dziecięcy węzeł

tag za pomocą składni tablicy:

Ptag.Childnodes [0].zamień (newChildNode);

Uruchom kod, a wyjście jest następujące:

Sprawdźmy kod źródłowy z opcji narzędzi programistycznych przeglądarki, aby sprawdzić, czy

nie było całkowicie usunięte, a nie BOLD TAG a jego zawartość została dodana w środku

Teraz, jak widać, pomyślnie zastąpiliśmy węzeł dziecięcy

etykietka i dodałem kolejny tag Wewnątrz niego jako węzeł dziecięcy. To wszystko dla zamienić() metoda.

Wniosek

zamienić() jest naprawdę przydatną metodą w JavaScript, którą można użyć do zastąpienia węzłów i elementów nowymi węzłami i elementami. Takie podejście jest zdecydowanie lepsze niż tradycyjne podejście JavaScript polegające na odwołaniu się do węzła dziecięcego za pomocą odniesienia do węzła nadrzędnego, oznacza to, że musimy również uzyskać odniesienie do węzła nadrzędnego. Nauczyliśmy się składni i pracy zamienić() Metoda wraz z przykładami i potwierdziła wymianę, patrząc na kod źródłowy wewnątrz narzędzi programistów przeglądarki.