Real example of jQuery’s replaceWith()…and Ext’s method

What the hell is Ext?

That is what you are asking yourself, right? It’s another javacsript library, which I have gotten into many an argument over why one would use it over another library. Personally, I find it to be more like writing straight javacsript (which I suck at). My point isn’t to get you to use it, because I don’t care. I love jQuery, and that is that. I’ll show you the difference in this post/article between how jQuery would do something versus how Ext would do it, because I HAD to do it in Ext. On to what I had to accomplish.

The Problem

Here is the set up: I have a hard-coded div with two links in it, I am not allowed to touch the actual HTML page itself (meaning the myPage.html), but I do have to change the href of the first link, and the text that displays in it.

For you jQuery newbies, I’m going to be using first() and replaceWith() to do this, and you will be amazed by the simplicity of it. Because I am not all that familiar with Ext Core javascript library, I actually had to write this in jQuery first and then translate it over. This though is much easier than when I tried doing that with my slider.


Here is the HTML to begin with:

<div id="container">
<a href="/feature.html">FEATURE</a>
<a href="/pageTwo.html">Page Two</a>
</div>

And here is the jQuery:

$('#container a').first().replaceWith('<a href="/pageOne.html">Page One</a>');

Easy as pie: find the ‘a’ tags in the div with an ‘id’ of container, get the first one, and replace it with what I am giving it. Now lets compare that to how to do it in Ext.

Ext.get('container').first().replaceWith({tag: 'a', href: '/pageOne.html', html: 'Page One' });

These are fairly different. In Ext, the first() is getting the first sibling, where as in jQuery the first() is getting the first of the matched elements. The replaceWith() in Ext is saying what kind of tag, attribute and the html to replace the sibling with. In jQuery, I’m just giving it the entire chunk of html.

It is differences like these that make Ext a pain in the ass, for me anyways to deal with. Another difference which isn’t illustrated here, and I should have looked at the documentation faster, is how you actually get elements/classes/ids. For instance, there are two ways to get an id in Ext. The first is simply using ‘get’. The second is ‘fly’. If you need to reference the ‘id’ later, you would use ‘get’, but if its a one line I need this done, and I’m not going to do anything else, you would use ‘fly’. If though, you want to target an element by class, you would use ‘select’ instead. That part was frustrating because it took me a while to figure out. I kept trying it the jQuery way by just using ‘get’ and the ‘.className’, which didn’t work.

Just another reason why I like jQuery

Personally, I prefer jQuery because of its quickness to the point. Takes less, and for me makes more sense. The argument I have had repeatedly is that Ext actually reads better – ie. I’m ‘getting’ something, and here is what I’m doing to it. My opponent in this discussion says that if you have a bunch of code, jQuery is harder for someone else to come in and know what is going on because of how abstracted it is. Its that abstraction which makes it awesome to me though. My side is, if you are commenting on what you are doing, then everything is fine. People without any knowledge of jQuery are not going to understand it anyway, and even more so with Ext. Anyone working on it is going to have some knowledge of libraries, and I think the syntax of jQuery is easier…just look at the parameters you have to type in the example above in the replaceWith().

The point of this was to show you a real example of something I had to do, and do a slight comparison between two libraries doing the same thing. Have you had to work between two different javascript libraries? If so, let me know which, and the reasons you have for liking one over the other.

Coupon Code: webmachine

jQuery junkBox

.first();
Because its relevant to the post, this method returns the first of the matched elements. So below, it will return the first list item in the matched set.

$('.myList li').first();

Tags: ,

Leave a Reply