logo oujood
🔍

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

OUJOOD.COM

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.

Exemple :    📝  Copier 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.

Exemple :    📝  Copier 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.

Exemple :    📝  Copier 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.

Exemple :    📝  Copier 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 $.

Exemple :    📝  Copier 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