Need insight on understanding this small piece of HTML and Javascript

Question

I've embedded a LinkedIn Apply Now button on my page. But there are several things that confuse me. First of all, when I right click the widget, I cannot "save as" the image. Guess because it's not an image! How is such a button created?

Secondly, when I right click the page and view source, all I see is the code I have written. I thought the in.js that is included would append DOM elements to the document in order to make that button visible. (e.g headElement.appendChild(document.createElement('img')) or something like that. How come? If nothing is embedded into the DOM tree, how is that button there? If somethings are embedded, then why aren't they visible in the HTML source code? Because when I headElement.appendChild something by using Javascript, it appears in the HTML source as well.

And last but not least, how can I check if that LinkedIn button is standing there in an iframe or by itself?

EDIT: I inspected the element on Chrome and what I get is a bunch of span tags. There is also an a tag with href="javascript:void(0);. What's that supposed to mean? What does javascript:void(0) do?

I would appreciate some deep insight into this as I am pretty new to front-end development, html and javascript and all...

Any help appreciated.

Answer 1

The button is nothing more than a few nested spans, one of which, with id = li_ui_li_gen_1325073350899_0-logo is styled with CSS to have a background image, pointing to http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

Note that that image contains other things aside from the background of the button. That is because they are using a technique called CSS sprites.

Indeed much of the work is done by the in.js file. If you look through the code, however, you'll see that it has been minified, so it is a bit though (but not at all impossible, it is actually a good exercise) to go through the code.

Finally, no, there is no iframe, just a bunch of spans.

As the other answer says, you can try using FF+Firebug or Chrome to explore the document.