Add jQuery to any web page by using a bookmarklet!

I had an inspiration today: I can create a bookmarklet to append a reference to the jQuery library to any page! And, by using Firebug, I can execute custom jQuery code against a page in the console tab.

Here's the bookmarklet code: Append jQuery to current page

Simply right-click the hyperlink above and add it as a Favorite (IE) or a Bookmark (Firefox, Mozilla). Make sure you add it to your Favorites-->Links folder in IE, or your Bookmarks Toolbar in Firefox. This way you can click the toolbar to execute the bookmarklet's code.

Here's what the code looks like (in long form):

    // create a new script element in the DOM
    var jQscript=document.createElement('script');
    // use the latest version of the jQuery core library
    // append the new script element to the DOM

The latest version of jQuery (core) can be found at:


Once you have appended the latest version of the jQuery library, you can use "$" syntax to access elements of the current page's DOM. You can use all of the selection, filtering, CSS modification, attribute modification, and other features that jQuery allows! It helps to have a "console" interface for executing custom Javascript, like the console in Firebug.

Note: To use some advanced UI features of jQuery, you'll also need to "attach" some optional jQuery add-on libraries (like sorting and drag-and-drop). You can experiment with the best way to do that.

Possible uses

Using this technique, you can...

  • change the the styling of elements
  • show or hide elements
  • use your imagination! (I'll probably invent and post more uses for this technique later.)


What do you think? Do you have any ideas for using this technique?

Trackback URL for this post:


A better jQuery Bookmark

Instead of hitting the jQuery website with a ton of hits lets use the Google hosted jQuery script. Also, instead of looking for an id lets instead look for the jQuery variable, that way if the website already has jQuery you don't load it again and finally so you don't possible mess-up the site because it might be using the prototype library lets call jQuery.noConflict(). However with this you must make sure that you use the jQuery variable and not the $ variable unless you wrap it in an anonymous function.

So here is the new code:

<a href="javascript:void(function(){if(typeof%20jQuery%20==%20"undefined"){var%20jQscript=document.createElement('script');jQscript.src='';document.documentElement.appendChild(jQscript);jQuery.noConflict();}}());">Add jQuery</a>

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
By submitting this form, you accept the Mollom privacy policy.