jquery - 动态创建标记 Jquery

Question

我正在尝试动态创建一堆列表项，我正在寻找的结构是

<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>

我试图用这段代码创建这个结构，但当我向其中添加“img”部分时，它似乎被破坏了。如果我取出 img 部分，它至少可以工作，但不完全是我想要的。关于如何解决这个问题有什么想法吗？

 $('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')
        ))));

我正在尝试动态创建此处找到的列表项: http://jquerymobile.com/demos/1.1.1/docs/lists/lists-icons.html

请注意，他们有未关闭的图像标签。我猜这就是添加 span 标签的有效方式。不确定如何才能实现不关闭 JavaScript 中的 img 标签？

Answer 1

是的，它应该:img是一个void元素，它不能有任何类型的子节点、子节点或后代.

为了实现您想要的目标(通过阅读您的代码)，我建议:

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 .