Insert new elements in reverse order using jQuery

by Admin 28. July 2009 06:28

prepend enries using jquery

I have been extending the current sample clock synchronization application to add some more features to show more capabilities of jQuery. In the last update I added functionality to display latency numbers when service was called every X number of minutes. If you will let the page running for quite some time you will see how quickly the entries get appended to the display. What we really want is that latest entries should be displayed at the top. So basically instead of appending the new entries, we want to prepend the new entry to the last entry added. We are in luck here. jQuery does offer couple of methods here that makes it easy. prepend, prependTo, before, insertBefore methods are your friend here. It turns out that all these methods get mapped to one function behind the scene, insertBefore. Following code snippet from the application shows entries are added in reverse order.

var elLastLatencyEntry;
var elLastMessageEntry;

function displayLatency() {
 var elToAppend = null;
 if (latency == -1) { elToAppend = $("<p>Initializing</p>"); }
 else { elToAppend = $("<p>" + latency + " ms</p>"); }
 if (null == elLastLatencyEntry)
 { elLastLatencyEntry = elToAppend.appendTo(elLatencyDisplay); }
 else { elLastLatencyEntry = elToAppend.prependTo(elLastLatencyEntry); }

You can see from the code that I save the last entry that was added in a variable for later use. This avoids over head of finding the latest entry again and again every X number of seconds.

Views: 10356


AJAX | AJAX | JavaScript | JavaScript | JQuery | JQuery


7/28/2009 6:40:39 AM #


Insert new elements in reverse order using jQuery

You've been kicked (a good thing) - Trackback from

8/28/2009 6:49:00 AM #

Singles Latina

Thanks for the heads up. I will consider this.

Singles Latina United States

11/12/2009 8:02:54 PM #

payday loans

Got a 404 err all day for this article. Nice btw.

payday loans United States

12/5/2009 6:10:45 AM #

pay day loans

Interesting post

pay day loans United States

12/12/2009 12:28:04 AM #

Hispanic Gay Dating

Nice post. Thanks for sharing the information. Hope you will post another interesting topic just like this.

Hispanic Gay Dating United States

12/21/2009 7:44:46 AM #

Missouri Payday Loans

thanks!  very helpful post!! like the template btw ;)

Missouri Payday Loans United States

12/30/2009 9:58:11 AM #

instant advance

Searching for this for some time now - i guess luck is more advanced than search engines :)

instant advance United States

1/2/2010 4:06:49 AM #

faxless payday loans

Thank you for your help!

faxless payday loans United States

1/11/2010 12:54:56 AM #

Chapel Hill Real Estate

This is very useful information. I am sure a lot of people will benefit from it. Thanks!

Chapel Hill Real Estate United States

2/4/2010 5:09:15 AM #


ucvhost United States

2/6/2010 7:20:37 AM #


How to use Remote Desktop Connection for the two systems which have same IP Address?

ucvhost United States

2/12/2010 3:06:39 AM #


i. I wanted to drop you a quick note to express my thanks. I've been following your blog for a month or so and have picked up a ton of good information as well as enjoyed the way you've structured your site.

ucvhost United States

4/6/2010 1:46:14 AM #

Tiffany Keys

i found this informative and interesting blog so i think so its very useful and knowledge able.I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me.Really the blogging is spreading its wings rapidly.

Tiffany Keys Malaysia

4/10/2010 2:36:25 AM #

payday loans

The true worth of a man is to be measured by the objects he pursues.

payday loans United States

5/31/2010 9:09:28 PM #

Multivariate Testing

That's smart to save the last entry. I can see how constantly searching for the unsaved entry would waste time and energy. Very efficient decision.

Multivariate Testing United States

Powered by BlogEngine.NET
Theme by Naveen Kohli