Load JavaScript Dynamicly

by Damith Nuwan Sampath

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css
http://code.jquery.com/jquery-1.9.1.min.js
http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js

<div data-role="page" id="codeEditorView" data-theme="a" data-url="demo-page">
    <div data-role="header" data-theme="b">
        <h1>Test your HTML, CSS, JS snippets Here</h1>
        <a href="#left-panel" data-theme="b" data-shadow="false" class="ui-icon-nodisc" style="margin-top:2px"> Open &rarr;</a>
        <a href="#right-panel" data-theme="b" data-shadow="false" class="ui-icon-nodisc" style="margin-top:2px">&larr; Open</a>
    </div><!-- /header -->
    <div data-role="content">
        <div data-role="collapsible-set" data-content-theme="c">
	        <div data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed-icon="">
                <h3>Insrtuctions</h3>
				<ul data-role="listview" data-inset="true" data-theme="b">
                    <li data-icon="custom" id="skull">1. If you don't Get correct output</li>
                    <li data-icon="delete"></li>
                    <li data-icon="gear"></li>
                    <li data-icon="info"></li>
                    <li data-icon="false"></li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="b" data-collapsed-icon="">
                <h3>HTML</h3>
				<label for="htmlTextArea"></label>
				<textarea style="height:auto;" cols="40" rows="10" name="htmlTextArea" id="htmlTextArea"></textarea>
            </div>
            <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="">
                <h3>CSS</h3>
				<label...

CSS

/* CSS Document */

/* Swipe works with mouse as well but often causes text selection. */
#demo-page * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* Arrow only buttons in the header. */
#demo-page .ui-header .ui-btn {
    background: none;
    border: none;
    top: 9px;
}
#demo-page .ui-header .ui-btn-inner {
    border: none;
}
/* Content styling. */
dl { font-family: "Times New Roman", Times, serif; padding: 1em; }
dt { font-size: 2em; font-weight: bold; }
dt span { font-size: .5em; color: #777; margin-left: .5em; }
dd { font-size: 1.25em; margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
.back-btn { float: right; margin: 0 2em 1em 0; }

#left-panel ul li .helperTextCss{
	display:none;
}
#left-panel ul li .helperTextJs{
	display:none;
}
#left-panel ul li .helperTextHtml{
	display:none;
}
#resultContainer p{
	font-size:1em;
}

JavaScript

$( document ).on( "pageinit", "#codeEditorView", function() {
	$( document ).on( "swipeleft swiperight", "#codeEditorView", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft"  ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

$("#runMyCode").click(function(){
	   $("#resultContainer").html($("#htmlTextArea").val());
	   var newScript = document.createElement('script');
       newScript.id = "goback_script";
	   var newTextNode=document.createTextNode($("#jsTextArea").val());
	   newScript.type = 'text/javascript';
	   newScript.appendChild(newTextNode);
	   document.body.appendChild(newScript);
	   var newStyle = document.createElement('style');
	   var newTextNode2=document.createTextNode($("#cssTextArea").val());
       newStyle.type = 'text/css';
	   newStyle.appendChild(newTextNode2);
       document.body.appendChild(newStyle);
});
$('#goBack').click(function(){
    var script = document.getElementById("goback_script");
    script.parentElement.removeChild(script);
});
$('ul.left-nav li').click(function(){
    var curCss=$('#cssTextArea').val() +'\n';	
    var curHtml=$('#htmlTextArea').val() +'\n';	
    var curJs=$('#jsTextArea').val() +'\n';			
    $('#cssTextArea').val(curCss+$(this).find('.helperTextCss').html());
    $('#htmlTextArea').val(curHtml+$(this).find('.helperTextHtml').html());
    $('#jsTextArea').val(curJs+$(this).find('.helperTextJs').html());		
});