I have a 2 divs, one div has an iframe showing a pdf, i want to move the iframe from one div and place it in the other.

the code is as follows

<script>

function swapSrc()
{
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var if = document.getElementById("pdf1");
div2.appendChild(if);
div2.style.display = "block";
div1.style.display = "none";
}
</script>

</HEAD>

<BODY>
<div id="div2" style="border:3px solid red;margin-bottom:50px;display:none">
</div>
<div>
<button name="swapSrc" onclick="swapSrc();">Swap</button>
</div>
<div id="div1" style="border:1px solid blue">
<iframe id="pdf1" src="http://localhost/testPage/sample.pdf" style="height:250px;width:100%"/>
</div>

However once i do this the iframe does not get rendered in the new div. This works fine in firefox of course. If someone knows of a work around for this it would be much appreciated.

Thanks