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
1234567891011121314151617
<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>HTML
1234567
<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
