javascript - 将 HTML+Javascript 字符串附加到元素会导致奇怪的行为

Question

http://jsfiddle.net/PeKdr/

包含 HTML 和 Javascript 的 Javascript 变量会导致结果窗口中出现一些奇怪的现象。调用的按钮和调用的按钮都没有任何appendTheString()功能springAnAlert()。

我希望这个小提琴将新babby的 div 附加到foodiv，以及会导致警报框出现babby按下 div 内的按钮的脚本。

Answer 1

您不能</script>在脚本内部，因为</script>脚本结束。即使它在引号中。

所以答案是将字符串切成小块，其中不包含完整的结束标记。

function append() {
    var stringToAppend = "<"+"div class='babby'>The Babby Div!<"+
        "/div><script>alert('This alert never happens!');<"+"/script>";
  $('.foo').append(stringToAppend);
}

更新小提琴：http: //jsfiddle.net/PeKdr/5/

编辑：哦，我看到评论中已经给出了相同的解决方案。但我发誓在我发表这个答案之前我从来没有看到过评论！

Answer 2

这个小提琴也许是你想要的。 http://jsfiddle.net/PeKdr/8/

$("#button").click(function () {
   $('.foo').append("<div class='babby'>The Babby Div!</div>\<script\>alert(1);\<\/script\>");
});
window.showAlert = function(){
   $('.foo').append("<div class='babby'>The Babby Div!</div>\<script\>alert(2);\<\/script\>");
}