JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div class="parentdiv1"></div>
<div class="parentdiv2"></div>
<div class="parentdiv3"></div>
<div class="parentdiv4">
    <div class="div1">
        <div class="div2">
            <div class="div3">
                <p>look at html this should be under parentdiv3 not in it</p>
            </div>
        </div>
    </div>
</div>

JavaScript

//move & transverse DOM methods

//adds .div3>p inside .parentdiv3
//$(".div3>p").detach().prependTo(".parentdiv3");

//These next two do the same thing

//adds .div3>p under .parentdiv3
//$(".div3>p").detach().insertAfter(".parentdiv3");

//adds .div3>p under .parentdiv3
$('.div3>p').insertAfter($('.parentdiv3'));


// via - http://www.elated.com/articles/jquery-removing-replacing-moving-elements/

//some other ways to do this
  // Move the paragraph from #myDiv1 to #myDiv2
//  $('#myDiv1>p').appendTo( $('#myDiv2') );

  // Move the paragraph from #myDiv1 to #myDiv2
//  var para = $('#myDiv1>p');
//  para.prependTo( '#myDiv2' );

  // Move the paragraph from #myDiv1 to #myDiv2
  // by explicitly detaching it then adding it again
//  $('#myDiv1>p').detach().prependTo('#myDiv2');