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.