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.

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 :

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