Les mises à jour JavaScript sont livrées avec de nouvelles méthodes et fonctionnalités améliorées. L'une de ces nouvelles fonctionnalités est le remplacer par() méthode. JavaScript est pris en charge sur tous les navigateurs Web et la plupart des fonctions ou méthodes de JavaScript sont tous fonctionnels sur ces navigateurs à l'exception d'Internet Explorer. JavaScript est célèbre pour avoir trouvé de nouvelles solutions plus efficaces à divers problèmes. Le remplacer par() est exactement cela, une nouvelle méthode bien meilleure que l'approche triviale

Qu'est-ce que la méthode Remplacewith ()

Le remplacer par() la méthode est utilisée pour remplacer un élément \ nœud du Dom (Document Object Model) avec un autre élément \ nœud. Maintenant, vous pouvez aussi bien penser pourquoi avons-nous besoin d'une méthode distincte pour une tâche qui peut facilement être effectuée en utilisant l'approche JavaScript traditionnelle. Eh bien, pour le dire en mots simples, le remplacer par() Les méthodes permettent aux utilisateurs de remplacer les éléments en référençant directement les nœuds enfants. Auparavant, nous devions nous référer au nœud parent, puis nous référer au nœud enfant pour remplacer le nœud enfant.

Le remplacer par() La méthode est prise en charge par tous les navigateurs Web modernes sauf Internet Explorer. Vous pouvez obtenir le support pour Internet Explorer, mais vous aurez alors besoin d'un Polyfillage.

Syntaxe
La syntaxe de remplacer par() La méthode est la suivante:

oldNode.Remplacewith (newNode);

oldNode: L'élément ou le nœud qui doit être remplacé
newnode: Le nœud ou l'élément qui remplacera l'ancien nœud

Vous pouvez également ajouter plusieurs nœuds en utilisant le remplacer par() méthode comme tel:

oldNode.Remplacewith (newNode1, newNode2, newNode3…);

Maintenant, nous connaissons la syntaxe du remplacer par() Méthode, nous savons ce qu'il est censé faire, mais nous ne savons toujours pas comment l'utiliser. Alors, essayons de l'utiliser avec un exemple.

Exemple
Créez un fichier HTML avec les lignes suivantes à l'intérieur du étiqueter.

Tutoriel Linuxhint

Remplacewith () Méthode en javascript

Ceci est un texte aléatoire à remplacer

Cliquez pour remplacer le nœud

Passons en revue l'extrait de code et expliquons quelques choses:

• Nous avons créé une balise «centrale» et avons tout placé à l'intérieur pour le centrer sur la page.
• Nous avons créé un «div"Avec l'identifiant"démo".
• À l'intérieur de div, nous avons un "p”Tag avec du texte à l'intérieur.
• Nous avons créé un bouton à l'extérieur du div Pour remplacer le texte à l'intérieur du p Tag sur le clic sur ce bouton et l'a lié à la fonction "btnclick ()".

Exécutons la page HTML et c'est à quoi cela ressemble:

Créons la partie javascript du tutoriel.

Tout d'abord, nous créons la fonction "btnclick ()", sous le étiquette de script ou dans un fichier de script différent.

fonction btnclick ()
// Mette les commandes ultérieures à l'intérieur ici

Pour changer le

étiqueter ou ses nœuds enfants, nous devons d'abord obtenir sa référence dès que le bouton est enfoncé. Pour obtenir la référence du

étiqueter qui est à l'intérieur du Tag, nous utilisons un sélecteur de requête. Depuis le div a la id = «démo» Nous utilisons la commande suivante:

const ptag = document.queySelector ("# Demo P");

Nous avons maintenant besoin d'un élément qui remplacera le const newinput = document.createElement ("entrée");
newinput.Value = "Remplacé de l'ancien nœud";

Maintenant que nous avons créé un élément pour remplacer le

Tag avec, le remplaçant réellement en utilisant le remplacer par() Méthode en utilisant l'extrait de code suivant:

ptag.RemplaceWith (NewInput);

Enfin, si nous voulons également supprimer le bouton de l'écran. Pour faire cette utilisation:

const btn = document.getElementById ("btn");
btn.retirer();

L'extrait de code complet ressemblerait à ceci:

fonction btnclick ()
const ptag = document.queySelector ("# Demo P");
const newinput = document.createElement ("entrée");
newinput.Value = "Remplacé de l'ancien nœud";
ptag.RemplaceWith (NewInput);
const btn = document.getElementById ("btn");
btn.retirer();

Exécutez le fichier HTML et vous verrez ce résultat:

Maintenant pour vérifier si le

étiqueter a été remplacé, nous pouvons le faire en vérifiant le code source par les outils du développeur.

Au début, c'est comme ça:

Après avoir cliqué sur le bouton, cela devient ceci:

Comme vous pouvez le voir, le

étiqueter est entièrement remplacé par le étiqueter, Lorsque nous appuyons sur le bouton et maintenant il n'y a que la balise d'entrée à l'intérieur du "#Demo div".

Ajouter plusieurs nœuds

Nous pouvons également utiliser le remplacer par() Méthode pour insérer plusieurs nœuds en remplacement de l'ancien nœud. Séparez plusieurs nœuds avec une virgule ",".

Dans l'exemple actuel, essayons d'ajouter un nœud de texte simple avec la balise d'entrée en utilisant la commande:

ptag.RemplaceWith (NewInput, "Hello");

Note: Si nous écrivons seulement une chaîne, il créera automatiquement un nœud de texte.

Sortir:

Remplacement uniquement de nouilles par la méthode Remplacewith ()

L'une des principales caractéristiques de remplacer par() est de remplacer directement les nodes enfants. Supposons que nous ne voulons pas supprimer entièrement le

étiqueter à partir de l'exemple ci-dessus. Peut-être que nous voulons supprimer le contenu à l'intérieur du

étiqueter et insérer un étiquette audacieuse avec un peu de texte dans le

étiqueter. Nous pouvons le faire en faisant référence aux notes de chant du

étiqueter.

Tout d'abord, créons la balise audacieuse avec:

const newchildnode = document.CreateElement ("B");
newchildnode.textContent = "Je suis une balise audacieuse et le nouveau childNode";

Maintenant, remplaçons le premier nœud enfant du

Tag en utilisant la syntaxe du tableau comme:

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

Exécutez le code et la sortie est la suivante:

Examinons le code source à partir de l'option Tools Developer Tools du navigateur pour vérifier que le

n'était pas entièrement supprimé plutôt que le étiquette audacieuse Et son contenu a été ajouté à l'intérieur du

Maintenant, comme vous pouvez le voir clairement, nous avons réussi à remplacer le nœud enfant du

étiqueter et a ajouté une autre balise à l'intérieur comme son nœud enfant. C'est tout pour le remplacer par() méthode.

Conclusion

Le remplacer par() est une méthode vraiment utile en javascript qui peut être utilisée pour remplacer les nœuds et les éléments par de nouveaux nœuds et éléments. Cette approche est certainement meilleure que l'approche JavaScript traditionnelle pour se référer au nœud enfant en utilisant la référence du nœud parent, cela signifie que nous devons également obtenir la référence du nœud parent. Nous avons appris la syntaxe et le travail du remplacer par() Méthode ainsi que des exemples et confirmé le remplacement en regardant le code source à l'intérieur des outils du développeur du navigateur.