javascript - HTML+Javascript の文字列を要素に追加すると、奇妙な動作が発生する

Question

http://jsfiddle.net/PeKdr/

HTML と Javascript の両方を含む Javascript 変数を使用すると、結果ウィンドウが奇妙になります。を呼び出すボタンも、 を呼び出すボタンも、まったく機能しappendTheString()ませんspringAnAlert()。

babbyこのフィドルが新しいdiv を divに追加するfooことと、div 内のボタンが押された状態でアラート ボックスを表示するスクリプトを期待していましたbabby。

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\>");
}