Adding elements to a page with jquery

If you go to one of my Magnifier pages, you will see, between the title and the image, the link "Back to Magnifier index."

This particular link is not provided by Views or by Drupal, but is added to the page by jquery. It's a situation that comes up surprisingly often - wanting to add something to a generated page.

It's fairly simple. In fact, it's just one line of jquery.


$('div#main-holder div.node div.content')
.prepend('<div id="backlink"><a href="http://netnik.com
/home/magnifier">Back to Magnifier index</div>');


I added this code to the script already in my "Code" block for the Magnifier content type as described in this article.

In the first part - $('div#main-holder div.node div.content') - I am targeting the div I want to add the link to. It turns out there are two "content" divs in the main-holder div, but the one I want is the one inside the "node" div.

Then comes the jquery method - .prepend - and then comes the stuff to be added - <div id="backlink"><a href="http://netnik.com
/home/magnifier">Back to Magnifier index</div> - neatly wrapped in parentheses and single quotes.