Tips to understand Jquery execution flow

Question

I am new to JQuery. I wrote a small piece of code (fiddle). I was wondering if someone could throw some light on the order of execution of the statements i wrote.

The HTML:

<span>I</span>
<span>Love</span>
<span>JQuery</span>

​The JavaScript:

$(function() {
    $('<a>Url</a>').attr('href', 'http://www.jquery.com').appendTo('body');
    $('<span>More</span>').appendTo('body');
    $('span'.text());
});​

I was expecting an output of Url I Love JQuery More but the output, as you can see, is I Love JQuery UrlMore. Why is the output in that order? Please help

Answer 1

appendTo inserts an element to the end of the target. If you want to insert an element to the beginning of the target, use prependTo instead:

$(function() {
    $('<a>Url</a>').attr('href','http://www.jquery.com').prependTo('body');
    $('<span>More</span>').appendTo('body');  
});​

This way, <a>Url</a> gets inserted at the beginning of body, and <span>More</span> at the end, yielding your expected string Url I Love JQuery More.

DEMO.

In your fiddle, there's also this line $('span'.text()); which is wrong. To obtain the text of a span, use $('span').text() instead.

Answer 2

You are appending to the body, which adds it to the end. Append means that, by default, it will add it to the end of the text. Therefore, it's in three chunks.

I love JQuery --append-- URL --append-- More

Answer 3

After your document is loaded, Then the $(function(){}) section get executed. You try to append 'Url' and 'More' to the end of the document body, That's why 'UrlMore' is show after your initial HTML document.

Answer 4

As already explained, appendTo inserts at the end.
I personaly prefer working like this:

$('#mysample').prepend($('<a href="jquery">URL</a>')).append($('<span>More</span>'));

I first select my wrapper, and then tell what i want appended to it. This allows you to chain your actions as i did in the example. Also there is no need to add the attributes in a separate action, you can do it upon construction as i did.

the fiddle: http://jsfiddle.net/dSL6S/11/