Mover elementos con jQuery

Sheeraz Gul 18 agosto 2022
  1. Use appendTo y prependTo para mover elementos usando jQuery
  2. Use insertBefore() e insertAfter() para mover elementos usando jQuery
Mover elementos con 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 content es el contenido a mover.
  • El target es 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:

jQuery appendTo

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:

jQuery prependTo

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 content es el contenido a mover.
  • El target es 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:

jQuery insertAntes

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:

jQuery insertAfter

Sheeraz Gul avatar Sheeraz Gul avatar

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

Artículo relacionado - jQuery Element