HTML Content Appending

by fiddlerintheoffice

HTML

<h1>Append Contents of element to another element</h1>
<hr /><div id="a" style="padding:12px; margin:10px 0px; border:1px solid red">
    <input type="checkbox" />bubu
    Hallo<br>
    <div>all</div>
</div>
<div id="b" style="padding:12px; margin:10px 0px; border:1px solid green">

</div>
<hr />
<button id="toB">append to B</button>
<button id="toA">append to A</button>

CSS

h1 {
    font-size:16px
}

JavaScript

$('#toB').on('click', function(){
    $('#a').contents().appendTo($('#b'));
})
$('#toA').on('click', function(){
    $('#b').contents().appendTo($('#a'));
})