jQuery insertAfter: will insert <li> but not <a>?

Question

With this code:

<ul data-role="listview" id="routelist" data-theme="g">
<li id="firstlistitem" style="display:none;">

$("<li><a href='http://www.google.co.uk'></a></li>").text('content').insertAfter($("#firstlistitem"));

and see also this jsFiddle: http://jsfiddle.net/6MW2e/

How come I end up with an unlinked list item? How can I insert an element with a link?

thanks!

Answer 1

Because you're setting the text of the outer element (the <li> ) and not the inner element (the link).

If you're going to keep that syntax, you could try:

$('<li></li>')
    .append(
        $('<a href="www.google.co.uk"></a>').text('content'))
    .insertAfter($('#firstlistitem'));

It seems to me that it would be much cleaner if you simply did:

$('<li><a href="www.google.co.uk">' + content + '</a></li>')
    .insertAfter($('#firstlistitem'));

Answer 2

Your overwriting the text of the <li> when you call .text("content")

$("<li/>", {
    html: $("<a/>", { href: "http://www.google.co.uk", text: content })
}).appendTo("#routelist");