jQuery's Order of Insertion for .before() vs. .after()

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>");
});
};

Add a couple of interests rates, then click to add another interest rate (but leave the field blank) and click calculate. You'll see the table design itself is off, but the data is inserted in the correct order by looking at the NaN values. If I use, .after(), the table design is fine, but the top values (the interest rates) are backwards. How do I reverse that while still inserting after that first to keep the design intact? — Mark Bubel, Nov 21 '12 at 19:35

score 1 · Accepted Answer · answered Nov 21 '12 at 19:33

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.

answered Nov 21 '12 at 19:33

Ben Barden

2,001
2
20
28

ok, yea, I don't have an element after the to target. I didn't just want to add one for no reason, and I didn't think about temporarily inserting one. I'll try that. – Mark Bubel Nov 21 '12 at 19:38
http://stackoverflow.com/questions/1394020/jquery-each-backwards also has some techniques for reversing the contents of your jquery set, which should work just as well. – Ben Barden Nov 21 '12 at 19:48
Alright, fixed it. I actually added an id to the the parent, . Then I targeted that id, and appended the dynamic cell. It was pretty easy - not sure why I didn't do that earlier. – Mark Bubel Nov 21 '12 at 20:34

score 0 · Answer 2 · answered Nov 21 '12 at 19:32

If I understand where your confusion is, it's because .before() and .after() work in opposite of each other.

From jQuery API docs:

.before() - Inserts content, specified by the parameter, before each element in the set of matched elements.

.after() - Inserts content, specified by the parameter, after each element in the set of matched elements.

jQuery's Order of Insertion for .before() vs. .after()

2 Answers2