Move Content Back And Forth With jQuery

This jQuery snippet comes in handy when you want to move text/HTML content back and forth, the function below uses "is:empty" to check if empty element, and moves content from one element to another using appendTo() method, hope it helps.
JQUERY
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
<script type="text/javascript"> $("#toggle-button").click(function() { var sourceElement = $('#source-div'); //Source Div Element var destinationElement = $('#dest-div'); //Destination Div element var contentToMove = $('#content-div'); //Content Div Element to move var SourceDivEmpty = sourceElement.is(":empty"); //returns true if element is empty if(SourceDivEmpty) //return true if source element is empty { contentToMove.appendTo(sourceElement); destinationElement.empty(); }else{ contentToMove.appendTo(destinationElement); sourceElement.empty(); } }); </script>
And heres the HTML :
HTML
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<button id="toggle-button">Toggle</button> <div id="source-div"> <span id="content-div"> Det finnes mange ulike varianter av Lorem Ipsum. </span> </div> <div id="dest-div"></div>

Demo

    New question is currently disabled!