PHP condition If else
jQuery replaceAll() & replaceWith() deux fonctions pour remplacer des éléments avec du nouveau contenu
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 :
|
| sélecteur | Obligatoire. Spécifie les éléments à remplacer |
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>
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 :
|
| sélecteur | Obligatoire. Spécifie les éléments à remplacer |
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 : 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 : 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 : 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.