Traversing the DOM to update the contents of a table
<p>I'm trying to insert some dynamically generated html (via PHP) into a table, but I'm embarrassingly horrible at using JQuery functions to traverse the DOM. </p>

<p>Here's my table:</p>

<pre><code>&lt;table id = "tasks_table"&gt;
        &lt;tr&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Hours&lt;/th&gt;
            &lt;th&gt;Task&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr id = "form"&gt;
            &lt;form action="index.php" method="POST" id="task_form"&gt;
                &lt;td&gt;&lt;input type="text" id="deadline_text" name="deadline_text"/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type="text" id="duration_text" name="duration_text"/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type="text" id="description_text" name="description_text"/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type="submit" value="Add Task" id="task_submit"/&gt;&lt;/button&gt;&lt;/td&gt;
            &lt;/form&gt;
        &lt;/tr&gt;

        &lt;?php
            //TaskDB::generateTaskTable();
        ?&gt;
        &lt;/table&gt;
</code></pre>

<p>...And the code is going where the PHPcomment is--after the second row. I've tried using :nth-child and a few others without success. Any help would be much appreciated!</p>

<p>Jquery:</p>

<pre><code>&lt;script&gt;
        $(document).ready(function(){
            $('#task_submit').on('click', function(e){
                $.post('index.php', $("#task_form").serialize(), function(data){

                    $(' ').append(data);
                    console.log(data);
                });
                e.preventDefault();
            });
        });
    &lt;/script&gt;
</code></pre>
