Comment remplacer un élément HTML à l'aide de la méthode Remplace avec JavaScript?

JavaScript est largement utilisé dans le développement de pages Web et ses bibliothèques comme JQuery sont très pratiques. Dans les anciennes technologies, il était presque impossible de modifier ou de remplacer un élément HTML à l'aide de langages de script côté serveur, nous n'avons pu modifier le contenu à l'intérieur de l'élément à travers les langues backend. Mais grâce à JavaScript, cela a rendu la vie plus facile et nous a permis de changer dynamiquement l'élément de la page Web.

Il fournit diverses méthodes pour réaliser cette fonctionnalité, mais celle que nous allons examiner dans ce post est la jQuery remplacer par() méthode.

Jetons un coup d'œil en profondeur à cette méthode.

JQuery Remplacewith () Méthode

En jQuery, le remplacer par() La fonction est utilisée pour remplacer les composants choisis par de nouveaux et il renvoie les composants qui ont été remplacés.

Le remplacer par() La syntaxe de la méthode est mentionnée ci-dessous.

$ (élément).Remplacewith (newContent, (idx) => )

Arguments Explication

Voici l'explication des arguments de Remplacewith ()

• Nouveau contenu: C'est le contenu qui sera utilisé pour remplacer les pièces qui ont été choisies.
• (idx) => : C'est la fonction qui renvoie le contenu de remplacement. Il a également un index des arguments et ce paramètre d'index est utilisé pour renvoyer la position d'index de l'élément.

Pour mieux comprendre comment utiliser le remplacer par() fonction, considérez les exemples suivants.

Exemple 1

Supposons que nous ayons un élément de notre HTML dont l'ID est «élément1»Et en un clic sur un bouton, nous voulons le remplacer par le

La partie HTML serait comme ceci:

Ce texte est une balise div
Remplacer

Et au clic sur un bouton, nous voulons remplacer le

Maintenant, pour convertir complètement le Tag et son contenu au

$ (document).ready (function ()
$ ("# btn").cliquez sur (fonction ()
$ ("# element1").remplacer par("

Élément remplacé :)

");
);
);

Dans l'exemple ci-dessus, nous récupérons d'abord l'élément HTML en utilisant les ID du bouton et div tag puis remplacer le Tag avec le

tag à l'aide remplacer par() méthode.

Sortir

Vous pouvez voir que l'élément a été remplacé avec succès.

Conclusion

Javascript remplacer par() La méthode est utilisée pour remplacer un élément HTML par un autre élément selon l'exigence. Ce remplacer par() La méthode prend deux arguments, le premier argument est le contenu avec lequel vous souhaitez être remplacé tandis que le deuxième argument est utilisé pour renvoyer la position d'index du contenu que vous souhaitez remplacer par. Dans cet article, nous avons discuté des exemples de remplacement de l'ancien contenu par le nouveau à l'aide de jQuery.