jQuery's Order of Insertion for .before() vs. .after()
<p>I'm trying to load in an element created with jQuery to a table. The problem is, this dynamically-created element need to be inserted <strong>after</strong> another element (the <code>&lt;th&gt;</code>) so that the table retains a nice design. When using .after(), my element is inserted in to the table and the table design looks good, but the data I'm using appears in the opposite order than if I use .before() to insert. Why am I seeing opposite behavior with .before() / .after()?</p>

<p>Edit: .before() gives me the correct order of insertion for the interest rates, but it inserts the elements before the , so the table cols/rows do not line up. .After() gives me the opposite insertion for the interest rates, but the elements are added after that , so the the table retains its rows/cols.</p>

<p>Here's my code as my explanation probably isn't very clear:</p>

<pre><code>&lt;form id="form"&gt;        
    &lt;label for="interestInput" id="interestRateLabel"&gt;Enter interest rate&lt;/label&gt;
    &lt;input id="interestInput" name="interestRate" type="text"&gt;
    &lt;a href="#" id="addInput"&gt;Add another interest rate&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;

    &lt;label for="loanAmtInput" id="loanAmtLabel"&gt;Enter loan amount&lt;/label&gt;
    &lt;input id="loanAmtInput" name="loanAmt" type="text"&gt;

    &lt;button onclick="doCalculation(); return false;"&gt;Calculate!&lt;/button&gt;
&lt;/form&gt;

&lt;div id="standard"&gt;
    &lt;h1&gt;Standard Repayment&lt;/h1&gt;
    &lt;table width="600px;" border="1" cellspacing="0" cellpadding="0"&gt;
         &lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;
            &lt;tr id="totalMonths"&gt;
               &lt;th scope="row"&gt;Total months&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr id="paymentPerMonth"&gt;
               &lt;th scope="row"&gt;Payment/mo&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr id="totalPayment"&gt;
               &lt;th scope="row"&gt;Total payment&lt;/th&gt;
            &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;  

&lt;div id="extended"&gt;
    &lt;h1&gt;Extended Repayment&lt;/h1&gt;
    &lt;table width="600px;" border="1" cellspacing="0" cellpadding="0"&gt;
         &lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;
            &lt;tr id="totalMonths"&gt;
               &lt;th scope="row"&gt;Total months&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr id="paymentPerMonth"&gt;
               &lt;th scope="row"&gt;Payment/mo&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr id="totalPayment"&gt;
               &lt;th scope="row"&gt;Total payment&lt;/th&gt;
            &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;div id="graduated"&gt;
    &lt;h1&gt;Graduated Repayment&lt;/h1&gt;
    &lt;table width="600px;" border="1" cellspacing="0" cellpadding="0"&gt;
         &lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;
            &lt;tr id="totalMonths"&gt;
               &lt;th scope="row"&gt;Total months&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr id="paymentPerMonth"&gt;
               &lt;th scope="row"&gt;Payment/mo&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr id="totalPayment"&gt;
               &lt;th scope="row"&gt;Total payment&lt;/th&gt;
            &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>And, here's the relevant JS: </p>

<pre><code>var doCalculation = function() {

$("div#standard table tbody th.rates, div#standard table tbody tr#totalMonths td, div#standard table tbody tr#paymentPerMonth td").remove();

var loanAmount = document.getElementById("loanAmtInput");

$("input[name=interestRate]").each(function(i){

    var num = parseInt( $(this).val(), 10 );
    var totalMonths = num * 3;
    var paymentPerMonth = num + (1/2);
    var totalPaymet = num * 120;

    console.log(i + "=" + num);

     $("div#standard table tbody th[scope=col]").before("&lt;th class=rates&gt;" + num + "% interest rate&lt;/th&gt;");
     $("div#standard table tbody tr#totalMonths").append("&lt;td&gt;" + totalMonths + "&lt;/td&gt;");
     $("div#standard table tbody tr#paymentPerMonth").append("&lt;td&gt;" + paymentPerMonth + "&lt;/td&gt;");
});
</code></pre>

<p>};</p>
