Mover elementos con jQuery
-
Use
appendToyprependTopara mover elementos usando jQuery -
Use
insertBefore()einsertAfter()para mover elementos usando jQuery
Este tutorial demuestra cómo mover elementos en jQuery usando diferentes métodos.
Hay diferentes métodos en jQuery que se pueden usar para mover o insertar elementos en posiciones particulares en un documento HTML. Estos métodos incluyen appendTo(), prependTo(), insertBefore(), insertAfter(), y algunos otros métodos.
Analicemos los métodos y mostremos algunos ejemplos.
Use appendTo y prependTo para mover elementos usando jQuery
Los métodos appendTo() y prependTo() se utilizan para mover elementos a otro elemento en jQuery.
Por ejemplo, supongamos que un div contiene tres párrafos y queremos mover un párrafo más al div. En ese caso, el método appendTo() moverá los nuevos párrafos al div después de los tres párrafos, y el método prependTo() moverá el párrafo al div antes de los tres párrafos.
La sintaxis para ambos métodos se muestra a continuación:
$("content").appendTo("target");
$("content").prependTo("target");
Dónde:
- El
contentes el contenido a mover. - El
targetes la posición donde se moverá el elemento.
Probemos un ejemplo para el método appendTo():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery appendTo</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").appendTo("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
El código anterior moverá el ContentDiv al TargetDiv después de los otros elementos en el div. Ver salida:
Ahora, implementemos el mismo ejemplo para el método prependTo(). Ver ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prependTo</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").prependTo("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
El código anterior moverá el ContentDiv al TargetDiv antes que los otros elementos en el div. Ver salida:
Use insertBefore() e insertAfter() para mover elementos usando jQuery
Los métodos insertBefore() y insertAfter() se utilizan para mover los elementos antes y después de otros elementos. La sintaxis de estos métodos se muestra a continuación:
$("content").insertBefore("target");
$("content").insertAfter("target");
Dónde:
- El
contentes el contenido a mover. - El
targetes la posición posterior o anterior a donde se moverá el contenido.
Probemos un ejemplo para el método insertBefore():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery insertBefore</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").insertBefore("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
</body>
</html>
El código anterior moverá el elemento de contenido antes del elemento de destino. Ver salida:
Ahora, probemos el ejemplo del método insertAfter():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery insertAfter</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").insertAfter("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
El código anterior moverá el contenido después del objetivo. Ver salida:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook