Podemos reemplazar elementos HTML usando el método jQuery .replaceWith() . Con el método replaceWith() de jQuery , podemos reemplazar cada elemento del conjunto de elementos coincidentes con el nuevo contenido proporcionado y devolver el conjunto de elementos que se eliminaron.
El método .replaceWith() elimina contenido del DOM e inserta contenido nuevo en su lugar con una sola llamada.
Sintaxis:
replaceWith( newContent )
.replaceWith( function )
Valor devuelto:
Nota: El método jQuery .replaceWith() devuelve el objeto jQuery para que los otros métodos se puedan enstringr a él. Sin embargo, debe tenerse en cuenta que se devuelve el objeto jQuery original. Este objeto se refiere al elemento que se eliminó del DOM, no al nuevo elemento que lo reemplazó.
Ejemplo 1: Obtenemos el elemento que necesitamos reemplazar y escribimos un nuevo elemento en su lugar.
HTML
<!DOCTYPE html>
<html>
<head>
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").replaceWith
("<div style='width:200px;height:100px;\
background-color:red;text-align:center;\
vertical-align:middle;display:table-cell'>\
<strong>new div</strong></div>");
});
});
</script>
</head>
<body>
<p>Example paragraph.</p>
<button style="margin: 20px 0px;">
click to replace
</button>
</body>
</html>
Producción :
Ejemplo 2: También podemos reemplazar un elemento HTML con otro elemento HTML existente.
XML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").replaceWith($("h1"))
});
});
</script>
</head>
<body>
<p>Example paragraph.</p>
<button style="margin: 20px 0px;">
click to replace
</button>
<h1>H1 tag</h1>
</body>
</html>
Producción :
Ejemplo 3: podemos reemplazar varios elementos HTML al mismo tiempo.
HTML
<!DOCTYPE html>
<html>
<head>
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".X").replaceWith("<h3>new element</h3>")
});
});
</script>
</head>
<body>
<p class="X">Example paragraph.</p>
<h1 class="X">Example H1</h1>
<div
style="width: fit-content;
background-color: green;
padding: 10px;" class="X">
Example div
</div>
<button style="margin: 20px 0px;">
click to replace
</button>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por varunkedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA