Question

I have an html page with (among other things) a Unity3D window. I would like to replace everything on the page without causing the Unity window to reload. I have tried the following jquery-tastic

   function replaceSurround(keepElem, newElem)
    {
        keepElem.siblings().remove();
        keepElem.prepend(newElem.prevAll());
        keepElem.append(newElem.nextAll());

        var keepParent = keepElem.parent();
        var newParent = newElem.parent();
        if (keepParent && newParent)
        {
            replaceSurround(keepParent, newParent);
        }
    }

where keepElem is an element in the original document and newElem is the corresponding element in the new document, but it did not work very well.

Answer 1

Here is what I’ve got, it seems to work…

jQuery.fn.rewrap = function(newWrap){
    var $parent = jQuery(this).parent();
    var $clone = jQuery(this).siblings().clone()
    var $newParent = $clone.wrap(newWrap).parent().clone();
    $parent.replaceWith($newParent);
}


$('#header').rewrap('<div class="container" style="background-color:blue;" />');

I tested it on the Stackoverflow website. One small problem though, it seems to be refiring some onX events…?

[edit]

On second thought, that is not what you meant at all….

Can’t you just do something like:

$('#result').load('ajax/test.html #result');

?