Add hidden div (including it's content) into the DOM
<p>I have a hidden div that I want to add (append) into another position in the DOM. The code have I have is not working as expected;</p>

<pre><code>$('[class*="time-span"]').on('click', function() {

    var modelPanel = $('.model-detail-panel');

    modelPanel.contents().wrap('&lt;div class="model-detail-panel" id="model-detail"&gt;').insertAfter('.timeline');
    modelPanel.slideToggle('fast', function() {
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);
    });
});
</code></pre>

<p>The content of the div 'model-detail-panel' is being inserted into the right location, but the actual surrounding div is not getting inserted. Why would this be and are the methods I've used the most appropriate ones to achieve this?</p>

<p>Thanks in advance...</p>
