将JavaScript代码添加到jquery onclick事件的页面上

Question

I need to add in some javascript code onto my page after an onclick. I have the following code but nothing happens on the button click and the page just outputs:

'); }); }); [button]

Here is my code:

<button type="submit" id="btn">button</button>

<div id="code"></div>

<script>
jQuery(document).ready(function () {
    jQuery('#btn').click(function(){
        jQuery('#code').append('<script>alert("WORKING");</script>');
    });
});
</script>

Answer 1

I got it to work by escaping the forward slash in </script>. The closing script tag is not allowed in inline Javascript, as it messes with the way the code is parsed:

        jQuery('#code').append('<script>alert("WORKING");<\/script>');

Answer 2

This is actually a surprisingly simple task and doesnt require Jquery -- although you can execute the function with or without Jquery, however you like.

function AddNewExternalScriptToThisPage(ExternalScriptURLPath) {
    var headID = document.getElementsByTagName("head")[0];
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = ExternalScriptURLPath;
    headID.appendChild(newScript);
}

You can also add in an onload event if you want:

function AddNewExternalScriptToThisPage(ExternalScriptURLPath) {
    var headID = document.getElementsByTagName("head")[0];
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = ExternalScriptURLPath;
    newScript.onload=scriptHasLoadedContinue;
    headID.appendChild(newScript);
}