Move-Restore

HTML

<header>This page is a sample page for Move-Restore</header>
<div>
    <h1>Move-Restore is a jQuery plugin to move around HTML and later restore it</h1>
    <p>This line will be moved into the &lt;header> because we need it there.</p>
    <article>The content of this page should stay down here, but the &lt;p> moved up into the &lt;header>.</article>
    <button id="restore">Restore</button>
    <button id="move">Move again</button>
</div>

JavaScript

// from: https://gist.github.com/teamaton/7a64e38318ca0159333c
// author: [email protected]
// LICENSE: MIT
(function($) {
    $.fn.moveTo = function(target, method) {
        method = method || "appendTo";
        var randomNumber = Date.now().toString() + (10 ^ 6 * Math.random().toPrecision(6));
        var placeholderId = "placeholder-" + randomNumber;
        var $content = $(this).replaceWith("<script id='" + placeholderId + "' type='text/html'></" + "script>");
        // same as $content.appendTo($(target)) but with variable method ;-)
        $content[method]($(target));
        $content.data("placeholderId", placeholderId);
    };
    $.fn.restore = function() {
        var $content = $(this);
        var placeholderId = $content.data("placeholderId");
        if (!placeholderId) return;
        var $destination = $("#" + placeholderId);
        if ($destination.length === 0) {
            console.error("Missing placeholder with id '' to restore content:", placeholderId);
            return;
        }
        $destination.replaceWith($content);
    };
})(jQuery);

$().ready(function (){
    $("p").moveTo("header");
    $("button#restore").click(function() { $("p").restore(); });
    $("button#move").click(function() { $("p").moveTo("header"); });
});