Move element within parent from iframe

Question

I have the following code in index.php

<div id="image_group_1">
    <img src="/images/image.jpg" id="image1" data-temp="Some useful text">
</div>
<div id="image_group_2">
</div>

I have an iframe that opens in Fancybox and I am looking to use a trigger within this iframe to move the img element from image_group_1 to image_group_2

Now, if this were being triggered within the main document then this would be a matter of

$("#image1").appendTo("#image_group_2");

However, as the trigger is within the iframe, I have tried the following without success

var moveFrom = window.parent.$("#image1");
var moveTo = window.parent.$("#image_group_2");
moveFrom.appendTo(moveTo);

Any suggestions as to how to get the desired result?

Answer 1

Assuming both the parent window and iframe content are on the same domain, you can try using the window.parent as a context selector. Try this:

var moveFrom = $("#image1", window.parent.document);
var moveTo = $("#image_group_2", window.parent.document);
moveFrom.appendTo(moveTo);

If the domains are different, then you will not be able to achieve this, using either jQuery or native JS.