Question

I am attempting to create a bunch of list items dynamically, the structure I am looking for is

<li>
    <a href="Pending.aspx">
        <img src="images/gf.png" alt="" class="ui-li-icon">My Stuff
        <span class="ui-li-count">4</span> 
    </a>
</li>

I am attempting to create this structure with this code but it seems to be breaking when I add the "img" portion to it. If I take the img portion out it at least works but no quite what I am looking for. Any ideas on how to fix this?

 $('ul').append(
        $('<li>').append(
        $('<a>').attr('href', 'some link').attr('data-container', 'listview').append(
        //THIS BREAKS IT
        $('<img>').attr('src','some image').attr('alt','').append(
        $('<span>').attr('class', 'tab').append('1')
        ))));

I am trying to dynamically create the list items found here:
http://jquerymobile.com/demos/1.1.1/docs/lists/lists-icons.html

Notice they have image tags that are NOT closed. That is how its valid to add the span tag I guess. Not sure how I can accomplish NOT closing the img tag in javascript?

Answer 1

Yes, and it should: an img is a void element, it cannot have children, child-nodes or descendants of any kind.

To achieve what you seem to want (from reading your code), I’d suggest:

var list = $('<ul />').appendTo('body'),
    listElem = $('<li />').appendTo(list),
    link = $('<a />', {
        'href': 'pending.aspx',
        'class' : 'ui-li-icon'
    }).attr('data-container', 'listview').text('My Stuff').appendTo(listElem);
$('<img />', {
    'src': 'images/gf.png',
    'alt': 'alttext'
}).prependTo(link);
$('<span />', {
    'class': 'ui-li-count'
}).text('4').appendTo(link);​

JS Fiddle demo.