Javascript Live JS/Jquery、Html、CSS编辑器

我正在为一个实时html/js/jquery/css编辑器创建自己的代码。这是简单地注入css、html和javascript（特别是jquery）的代码。css和html工作得很好，但无论我做什么，我似乎都无法让jquery或javascript正常工作。。。 这是我的密码：

var contents = $('iframe').contents(),
    body = contents.find('body'),
    styleTag = $('<style></style>').appendTo(contents.find('head'));
var makeScript = $('<script class type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>');
var scriptTag = $('<script type="text/javascript"><\/script>').appendTo(contents.find('head'));
$ ('textarea').keyup(function() {
    var ths = $(this);
    if (ths.attr('id') === 'html') {
        body.html(ths.val());
    }
    else if (ths.attr('id') === 'css') {
        // it had to be css
        styleTag.text(ths.val());
    }
    else {
        makeScript.appendTo(contents.find('head'));
        scriptTag.text(ths.val());
    }
});

var contents=$（'iframe'）.contents（），
body=contents.find（'body'），
styleTag=$（''）.appendTo（contents.find（'head'）；
var makeScript=$（''）；
var scriptTag=$（''）.appendTo（contents.find（'head'）；
$（'textarea'）.keyup（函数（）{
var ths=$（本）；
如果（th.attr（'id'）='html'）{
html（ths.val（））；
}
else if（th.attr（'id'）='css'）{
//它必须是css
text（ths.val（））；
}
否则{
makeScript.appendTo（contents.find（'head'））；
scriptTag.text（ths.val（））；
}
});

这是我的html：

<div>
    <form>
        <h2>HTML</h2>
        <textarea id="html"></textarea>
        <h2>CSS</h2>
        <textarea id="css"></textarea>
        <h2>JS</h2>
        <textarea id="js"></textarea>
    </form>
</div>
<div id="output" style="height: 487px;">
    <iframe src="about:blank"></iframe>
</div>

HTML
CSS
JS

---

如果有人发现我的代码有问题，请提供帮助，如果您回答了，请解释您的解决方案，而不是仅仅键入一段代码……我尝试将jquery和常规javascript输入html文本区域（在脚本标记中，但仍然不起作用）。

首先，我认为您拼写错误。它应该是

scriptTag.text（this.val（））

我认为你的问题比这更深刻。我的理解是，当您将脚本标记注入dom时，会立即对其进行计算，但您正在等待将实际代码添加到页面后再放入。重新排序

scriptTag = $("<script type='text/javascript'>" + this.val() + "</script>")
   .appendTo($('iframe').contents().find('head'));

scriptTag=$（“”+this.val（）+“”）
.appendTo（$（'iframe'）.contents（）.find（'head'））；

注意，我必须拿出选择器内容，因为它在另一个函数的作用域中。
在附加脚本元素之前，您是否尝试过设置脚本元素的内容？（然后在随后的更改中删除旧元素并附加一个包含更改的新元素？）我尝试了您建议的方法，但仍然不起作用…我尝试查看浏览器在javascript中如何注册此.val（）（使用开发工具），在脚本标记之间，它要么显示为nothing，要么表示为undefined。想法？看看这个问题。看起来您无法使用jQuery添加脚本标记，因为当您将元素附加到DOM中时，jQuery会尝试解析这些元素。非常感谢！我确信这回答了我的问题。