jQuery adding table dynamically
<p>I am trying to dynamically add a table using jQuery. In this I am adding a table dynamically on the click event of button (View Budget) by using <code>$('#ss').text('txt')</code>. Why is it not working?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Money Management&lt;/title&gt;
        &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
        &lt;meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=yes;" /&gt;
        &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
        &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
        &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /&gt;
        &lt;script src="http://code.jquery.com/jquery-1.4.3.min.js"&gt;&lt;/script&gt;
        &lt;script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"&gt;&lt;/script&gt;
        &lt;SCRIPT language="javascript" src="final.js"&gt;&lt;/SCRIPT&gt;
        &lt;SCRIPT language="javascript" src="validation3.js"&gt;&lt;/SCRIPT&gt;
        &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
        &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /&gt;
        &lt;SCRIPT language="javascript"&gt;
        function tree()
        {
            alert("hello");
            var txt="";
            var myTable="";
            txt+="&lt;table id='myTable' border='5'&gt;";
            txt+="&lt;tr&gt;";
            txt+="&lt;th&gt;"Hello"&lt;/th&gt;";
            txt+="&lt;th&gt;"Hello"&lt;/th&gt;";
            txt+="&lt;/tr&gt;";
            txt+="&lt;/table&gt;";
            //$('#aa').tex('Hello World');
            $('#ss').text('txt');
            //document.getElementById('ss').innerHTML = "Hello World";
            //$('body').append('&lt;table id="myTable"&gt;&lt;tr&gt;Hello&lt;/tr&gt;&lt;/table&gt;');
        }
        &lt;/SCRIPT&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="viewT" data-role="page" data-theme="b"&gt;
            &lt;div id="header" data-role="header"&gt;
                &lt;h1&gt;Monthly Budget sheet&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div id="content" data-role="content"&gt;
                &lt;div id="TableV" data-role="fieldcontain"&gt;
                    &lt;form name="budgetSheet" method="post"&gt;
                        &lt;table&gt;
                            &lt;tr&gt;
                                &lt;td&gt;&lt;label for="mchoose"&gt;Select Month&lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;select id="mchoose" name="mchoose"&gt;
                                    &lt;option value="" selected="selected"&gt;Select&lt;/option&gt;
                                    &lt;option value="January"&gt;January&lt;/option&gt;
                                    &lt;option value="Febraruary"&gt;Febrarury&lt;/option&gt;
                                    &lt;option value="March"&gt;March&lt;/option&gt;
                                    &lt;option value="April"&gt;April&lt;/option&gt;
                                    &lt;option value="May"&gt;May&lt;/option&gt;
                                    &lt;option value="June"&gt;June&lt;/option&gt;
                                    &lt;option value="July"&gt;July&lt;/option&gt;
                                    &lt;option value="August"&gt;August&lt;/option&gt;
                                    &lt;option value="September"&gt;September&lt;/option&gt;
                                    &lt;option value="October"&gt;October&lt;/option&gt;
                                    &lt;option value="November"&gt;November&lt;/option&gt;
                                    &lt;option value="December"&gt;December&lt;/option&gt;
                                    &lt;/select&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;&lt;label for="Yview"&gt;Enter Desired Year&lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;input id=Yview type="text" placeholder="Enter in YYYY format"/&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;&lt;label for="Uview"&gt;Select View Type&lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;select id="Uview" &gt;
                                    &lt;option value="select"&gt;Select&lt;/option&gt;
                                    &lt;option value="expenses5"&gt;Expenses per Month&lt;/option&gt;
                                    &lt;option value="category5"&gt;Category Expenses per Month&lt;/option&gt;
                                &lt;/select&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                            &lt;td&gt;&lt;input
                                 type="button"
                                 data-role="button"
                                 id="click"
                                 value="View Budget"
                                 onclick="$( tree );"&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/table&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="ss"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
