I want to move an applet from a `div` element to another `div` element without reloading it. I don't want to use absolute positioning. Is there a way to do this ?

I try this but it's not working:

```
<html>
    <head>
    <script type="text/javascript">
        function toDiv1() {
            var appletElt = document.getElementById('myApplet');
            document.getElementById('div1').appendChild(appletElt);
        }

        function toDiv2() {
            var appletElt = document.getElementById('myApplet');
            document.getElementById('div2').appendChild(appletElt);
        }
    </script>
    </head>
    <body>
        <div id ="myApplet">
            <applet width="200" height="200" 
                codebase="http://mainline.brynmawr.edu/Courses/cs110/spring2002/Applets/Smiley/"
                code="Smiley.class"
                name="Smiley">
            </applet>
        </div>
        <div id="div1"></div>
        <div id="div2"></div>
        <div>
            <button onclick="toDiv1()">toDiv1</button>
            <button onclick="toDiv2()">toDiv2</button>
        </div>
    </body>
</html>

```

You can try your answer on this [fiddle](http://fiddle.jshell.net/gontard/JRZXF/)

---

The solution proposed by @goldenparrot with `outerHTML` works but not on all the browser (at least Firefox ESR). 

As stated in the @kritzikratzi answer and in the @biziclop answer, there are known problems on firefox with the reloading of iframe, flash object, plugin in firefox.

I think (but i am not sure) that the sole solution is to use absolute positionning (@cuzzea). However, i asked this question because i wanted to find another way ("I don't want to use absolute positioning"). This is why i will award no answer. 

Thanks for your contributions.