En jQuery existen dos métodos (prependTo() y appendTo()) muy útiles cuando se trata de mover un determinado elemento hacia el interior de otro, esta interactividad puede ser muy útil en determinados momentos, un uso muy común de estos métodos es cuando los elementos de una página web tienden a ajustarse (Responsive Design) debidamente a la resolución de un Desktop, Tablet o Móvil. Supongamos que tenemos un div con un anuncio en una columna lateral, este div se encuentra bien posicionado cuando es mostrado en un Desktop, ¿pero que ocurre cuando se trata de un dispositivo Móvil por ejemplo?, la columna lateral pasa a posicionarse a un segundo plano y en consecuencia el div con el anuncio también, tal vez no quieras que ese elemento div pase a un segundo plano y quieres colocarlo por ejemplo justo encima del contenido principal, estos métodos son ideales para realizar tal función.
$(elemento).prependTo(contenedor) -> El elemento se moverá al principio del contenedor
$(elemento).appendTo(contenedor) -> El elemento se moverá al final del contenedor
A continuación puedes ver un ejemplo con ambos métodos:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
<script>
$(function(){
$("#btn-prepend").on("click", function(){
$("#prepend").prependTo("#box-1");
});
$("#btn-append").on("click", function(){
$("#append").appendTo("#box-2");
});
});
</script>
</head>
<body>
<h3>prependTo()</h3>
<button type="button" id="btn-prepend">prependTo()</button>
<div id="box-1" style="border: 1px solid grey; padding: 10px;">
<h4>Contenedor 1</h4>
</div>
<div id="prepend" style="color: orange;">
Con prependTo() me moveré al inicio del contenedor
</div>
<h3>appendTo()</h3>
<button type="button" id="btn-append">appendTo()</button>
<div id="box-2" style="border: 1px solid grey; padding: 10px;">
<h4>Contenedor 2</h4>
</div>
<div id="append" style="color: orange;">
Con appendTo() me moveré al final del contenedor
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario