Create new iframe and load content synchronously

The goal is to create an iframe dynamically and synchronously append a SVG element to its document body.

We are trying to get this to work in Firefox.

Our research suggests Firefox resets iframes with a new document after appending iframes to the HTML. This triggers a load event, and only after this event can you successfully append content. Any content appended prior to the load event gets discarded.

The workaround, which is not ideal, is to wait for the load event then append the SVG element to the iframe.

Is it possible to avoid asynchronous behavior? We want to append the SVG element synchronously after creating the iframe.

Codepen: https://codepen.io/anon/pen/yWXjgM

var newElem = $(document.createElement("div"));
newElem.html("hi there");
var iframe = $(document.createElement("iframe"));
iframe.contents().find("body").append(newElem);
$("#box").append(iframe);
$("#box").append(newElem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>

from Create new iframe and load content synchronously