jQuery méthode HTML replaceAll() et replaceWith

jQuery La méthode HTML replaceAll()

jQuery cours tutorial

La méthode replaceAll() remplace les éléments sélectionnés avec du nouveau contenu.

Astuce : Les méthodes replaceWith() et replaceAll() font la même chose. La différence est dans la syntaxe : le placement du contenu et du sélecteur et que replaceWith() peut remplacer le contenu à l'aide d'une fonction.

Syntaxe

$(contenu).replaceAll(sélecteur)

Paramètre	Description
contenu	Obligatoire. Spécifie le nouveau contenu. Valeurs possibles : Code HTML - comme « <div> Hello </div> » Nouveaux éléments - comme document.createElement("div") Éléments existants - comme $(".div1")
sélecteur	Obligatoire. Spécifie les éléments à remplacer

Exemple : Remplacez tous les paragraphes par un contenu dom html.

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
    <script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("<p><b>Bonjour le
  monde!</b></p>").replaceAll("p");
    });
  });
  </script>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Replacer </button>
  </body>
  </html>

jQuery HTML replaceWith() méthode

La méthode replaceWith() remplace les éléments sélectionnés avec du nouveau contenu.

Astuce : Les méthodes replaceWith() et replaceAll() font la même chose. La différence est dans la syntaxe : le placement du contenu et sélecteur et que replaceWith() peut remplacer le contenu à l'aide d'une fonction.

Syntaxe

$(sélecteur).replaceWith(contenu)

Paramètre	Description
contenu	Obligatoire. Spécifie le nouveau contenu. Valeurs possibles : Code HTML - comme « <div> Hello </div> » Nouveaux éléments - comme document.createElement("div") Éléments existants - comme $(".div1")
sélecteur	Obligatoire. Spécifie les éléments à remplacer

Exemple : cliquez pour remplacer le premier élément htm p avec un contenu en gras.

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
    <script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
   
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p:first").replaceWith("<b>Bonjour le
  monde!</b>");
    });
  });
  </script>
  </head>
  <body>
  <p>Ceciu est un paragraphe.</p><br />
  <p>Ceci est un autre paragraphe.</p><br />
  <p>Ceci est un autre paragraphe.</p><br />
  <button>Remplacer</button>
  </body>
  </html>

Exemple : cliquez pour remplacer le bouton avec un div contenant le même mot.

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
    <style>
    button { display:block; margin:3px; color:#f00; width:200px; }
    div { color:#000; border:2px solid blue; width:200px;
        margin:3px; text-align:center; }
    </style>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
   
  <button>Premier</button>
  <button>Second</button>
  <button>Troisiéme</button>
   
  <script>
  $("button").click(function () {
    $(this).replaceWith( "<div>" + $(this).text() +
  "</div>" );
  });
  </script>
   
  </body>
  </html>

Exemple : remplacer tous les paragraphes avec des mots gras.

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
   </style>
   
  </head>
  <body>
   
  <p>Bonjour</p>
  <p>fantastique monde </p>
  <p>de Jquery</p>
   
  <script>
  $("p").click(function () {$(this).replaceWith(
  "<b>Merveilleux! </b>" );
  });
  </script>
  </body>
  </html>

Testez cet exemple et cliquez sur chaque paragraphe.

Exemple : cliquez sur chaque paragraphe pour le remplacer avec un div qui est déjà dans le DOM et sélectionné avec la fonction $.

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
    div { border:2px solid blue; color:red; margin:3px; }
    p { border:2px solid red; color:blue; margin:3px;
  cursor:pointer; }
    </style>
  </head>
  <body>
   
  <p>Bonjour</p>
  <p>fantastique monde </p>
  <p>de Jquery</p>
  <div>Remplacement effectué!</div>
   
  <script>
  $("p").click(function () {
    $(this).replaceWith( $("div") );
  });
  </script>
  </body>
  </html>

Note : l'objet div n'est pas cloner mais plutôt déplacé et remplace le paragraphe.

JQuery les méthodes pour manipuler HTML

Par gerywa 25 juillet 2014

jQuery replaceAll() & replaceWith remplacer des éléments avec du nouveau contenu

Référence des sélécteurs jQuery

jQuery La méthode HTML replaceAll()

Exemple : Remplacez tous les paragraphes par un contenu dom html.

jQuery HTML replaceWith() méthode

Exemple : cliquez pour remplacer le premier élément htm p avec un contenu en gras.

Exemple : cliquez pour remplacer le bouton avec un div contenant le même mot.

Exemple : remplacer tous les paragraphes avec des mots gras.

Exemple : cliquez sur chaque paragraphe pour le remplacer avec un div qui est déjà dans le DOM et sélectionné avec la fonction $.

La méthode secrète likes sans fin sur Facebook