How can I implement a Javascript/HTML Playground with Javascript?

I would like to implement a simple Javascript Playground like jsFiddle and was wondering on the best way to achieve this. From the way jsfiddle works, it creates an iframe with the submitted HTML/Javascript code. The source of the iframe comes from a dynamically created page from the jsfiddle server.

I was wondering if it would be possible to do this with client side javascript code only. I have tried this but does not work (custom code is not executed and do not know if jquery is loaded in the iframe):

$iframe = $(document.createElement("iframe"))

$html = $iframe.contents().find("html")

//HTML code
$html.children("body").append($(htmlcode))

//Javascript code (first jquery and then custom code)
$script = $(document.createElement("script"))
$script.attr("src","jquery.js")
$html.children("head").append($script)

$script = $(document.createElement("script"))
$script.html(javascriptcode)
$html.children("head").append($script)

$iframe.appendTo($("body"));

Copyright Notice：Content Author:「Seb」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/8467360/how-can-i-implement-a-javascript-html-playground-with-javascript