Question

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 after another element (the <th>) 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()?

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.

Here’s my code as my explanation probably isn’t very clear:

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

    <label for="loanAmtInput" id="loanAmtLabel">Enter loan amount</label>
    <input id="loanAmtInput" name="loanAmt" type="text">

    <button onclick="doCalculation(); return false;">Calculate!</button>
</form>

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

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

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

And, here’s the relevant JS:

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("<th class=rates>" + num + "% interest rate</th>");
     $("div#standard table tbody tr#totalMonths").append("<td>" + totalMonths + "</td>");
     $("div#standard table tbody tr#paymentPerMonth").append("<td>" + paymentPerMonth + "</td>");
});
};

Answer 1

It goes in in opposite order because JQuery does each in turn – so in one case, it’s running before() on each element, and in the other it’s running after(). The way to get the thing you actually want is to start at the <th>, grab next(), and then run before() on that. If you don’t have (or might not have) any elements after the <th>, then create a dummy element, insert it after() the <th>, insert the elements you want to insert before() the dummy element, and then delete the dummy element.