Confused about adding multiple td's to tr using JQuery
<p>So I have the following code:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(
function () {
    $("#txt").click(function () {
        var $TableRow = $('&lt;tr&gt;&lt;/tr&gt;');
        var $TableData = $('&lt;td&gt;&lt;/td&gt;');
        var $TableData2 = $('&lt;td&gt;&lt;/td&gt;');

        // Works
        $("#tblControls").append(
        $TableRow.html(
        $TableData.text("Test, Hello World3")
        )                
        );

&lt;/script&gt;
&lt;div style="display: inline"&gt;
    &lt;input type="button" id="txt" value="Add TextBox" style="" /&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;table id="tblControls" width="100%"&gt;

&lt;/table&gt;
</code></pre>

<p>But why does this not add two td's to the tr?</p>

<pre><code>$("#tblControls").append(
        $TableRow.html(
                $TableData.text("Test, Hello World3")
            +
                $TableData2.text("Test, Hello World4")
        ) 
);
</code></pre>

<p>What I get is this:</p>

<p><code>[object Object][object Object]</code>.</p>
