Inserting into newly created table elements using jQuery
<p>I currently have working code that inserts rows into a table. It looks like this: </p>

<pre><code>&lt;script type= "text/javascript"&gt;
$(document).ready(function() {
    var new_row = '&lt;td&gt;&lt;input type="text" value="Type question here" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="button"class="add_next" value=" + " /&gt;&lt;input type="button" class="move_up" value=" ^ " /&gt;&lt;input type="button" class="move_down" value=" v " /&gt;&lt;input type="button" class="remove" value=" x " /&gt;&lt;/td&gt;';

    var q_num = 2; // question number

    $('.add_next').click(function() {

        console.log(this);

        console.log(($('&lt;tr&gt;')).insertAfter($(this).closest('tr'))
                    .attr('id', 'Q'+q_num)
                    .attr('name', 'Q'+q_num)
                    .append(new_row)

            );
        q_num++;

    });
});
&lt;/script&gt;
</code></pre>

<p>My problem here that the variable new_row is ugly. I would like to use $.append($('')), .attr() and other jQuery functions to create this row on-the-fly but I have not come up with a way of doing it. The best I could come up with was this: </p>

<pre><code>($('&lt;tr&gt;')).insertAfter($(this).closest('tr'))
                    .append($('&lt;td&gt;'))
                        .append('&lt;input type="text" value="Type question here" /&gt;')
                    .append($('&lt;td&gt;'))
                        .append('&lt;input type="button"class="add_next" value=" + " /&gt;')
                        .append('&lt;input type="button" class="move_up" value=" ^ " /&gt;')
                        .append('&lt;input type="button" class="move_down" value=" v " /&gt;')
                        .append('&lt;input type="button" class="remove" value=" x " /&gt;');
</code></pre>

<p>How do I make this same entry using jQuery instead of a block of valid HTML?</p>

<p>Thanks in advance!</p>
