jQuery elem és tartalom áthelyezése.

appendTo()   Áthelyezés a kiválasztott elem alá, és annak pzíciója szerint.
                             A kiválasztott elemet és tartalmát kiveszi a szövegfolyamból, majd beszúrja egy másik kiválasztott elem alá, és annak pzíciója szerint.
							 
prependTo()   Áthelyezés kiválasztott elem fölé, és annak pzíciója szerint.
                             A kiválasztott elemet és tartalmát kiveszi a szövegfolyamból, majd beszúrja egy másik kiválasztott elem fölé, és annak pzíciója szerint.
							 
insertAfter()   Áthelyezés kiválasztott elem alá, left:0; 
                             A kiválasztott elemet és tartalmát kiveszi a szövegfolyamból, majd beszúrja egy másik kiválasztott elem alá, left:0;
							 
insertBefore()   Áthelyezés kiválasztott elem fölé, left:0;
                             A kiválasztott elemet és tartalmát kiveszi a szövegfolyamból, majd beszúrja egy másik kiválasztott elem fölé, left:0;

Ezt az elemet és tartalmát helyezzük át, id="p01".

Második elem tartalma, id="p02".

Teszt sor, azonosítója id="ide01"

jQuery meghatározások.

<head>
        <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
		
<script type="text/javascript">
$(document).ready(function(){

  // appendTo() 	Beszúrja kiválasztott elem végén. --------------------------------------------- 
    $("#btn01").click(function(){ 
         $("#p01").appendTo("#ide01");
    });
  // prependTo() Beszúrja kiválasztott elem elején. ------------------------------------------- 
    $("#btn02").click(function(){ 
         $("#p01").prependTo("#ide01");
    });
  // insertAfter() Beszúrja kiválasztott elem után. ----------------------------------------------- 
    $("#btn03").click(function(){ 
         $("#p01").insertAfter("#ide01");
    });
  // insertBefore() 	Beszúrja kiválasztott elem előtt. ---------------------------------------- 
    $("#btn04").click(function(){ 
        $("#p01").insertBefore("#ide01");
    });

  //  Oldal frissítése.
		$(".of5").click(function(){ 
				window.location.reload(); 
		});	
});
</script>
</head>
<body>

<div style="height: 50px;">
<p id="p01">Ezt az elemet és tartalmát helyezzük át, id="p01".</p>
<p id="p02">Második elem tartalma, id="p02".</p>
</div>
<br />

<h3 id="ide01">Teszt sor, azonosítója id="ide01"</h3>

<button id="btn01">appendTo()<br />Elem alá, és annak pzíciója szerint.</button> 
<button id="btn03">insertAfter()<br />Elem alá, left:0;</button>
<br />
<button id="btn02">prependTo()<br />Elem fölé, és annak pzíciója szerint.</button> 
<button id="btn04">insertBefore()<br />Elem fölé, left:0;</button><br />
<br />
<button class="of5" style="background-color: pink;">Minden új teszt előtt.<br />Kattints ide!</button>

</body>

jQuery hogyan csinálja

<p>Ezt az elemet és tartalmát helyezzük át, kiválasztott elemhez.</p>
<p>Ez az elem, marad.</p>
                                <h2 style="text-align: center;">Ez a kiválasztott elem.</h2>

appendTo()
                                <h2>Ez a kiválasztott elem.
                                <p>Ezt az elemet és tartalmát helyeztük át, kiválasztott elemhez.</p></h2>

prependTo()
                                <h2><p>Ezt az elemet és tartalmát helyeztük át, kiválasztott elemhez.</p>
                                Ez a kiválasztott elem.</h2>

insertAfter()
                                <h2>Ez a kiválasztott elem.</h2>
<p>Ezt az elemet és tartalmát helyeztük át, kiválasztott elemhez.</p>

insertBefore()

<p>Ezt az elemet és tartalmát helyeztük át, kiválasztott elemhez.</p>
                                <h2>Ez a kiválasztott elem.</h2>