javascript - JS 生成跨度位置

Question

有一段 HTML 代码:

<div class="caption">
    <h3>t
        <div class="pull-right">
            <span class="label label-primary"> 0 </span>
        </div>
    </h3>

    <span class="label label-info">aaaaaaaaaaa</span>
    <span class="label label-info">aaaaaaaaaaa</span>
    <span class="label label-info">aaaaaaaaaaa</span>
    <span class="label label-info">aaaaaaaaaaa</span>
    <span class="label label-info">aaaaaaaaaaa</span>
</div>

当我重新加载浏览器时它工作得很好。但是当我从 JS 生成这个时。跨度位置不好!

 div_firstcaption = jQuery('<div/>', { //////////
        class: 'caption',
    }).appendTo(div_thumbnail);

    h3 = jQuery('<h3/>', {
        text: 't'
    }).appendTo(div_firstcaption);

    h3_div = jQuery('<div/>', {
        class: 'pull-right'
    }).appendTo(h3);

    h3_div_span = jQuery('<span/>', {
        class: 'label label-primary',
        text: '0'
    }).appendTo(h3_div);

    for(var i = 0; i < 5;i++)
    {
        jQuery('<span/>', {
            class: 'label label-info',
            text: 'aaaaaaaaaaa'+i
        }).appendTo(div_firstcaption);
    }

上面的部分不错，但是JS生成的代码实在是太糟糕了。我做错了什么？或者只是浏览器无法重新定位它？我能做什么？谢谢

当跨度不能正常工作时，我无法通过双击仅选择一个跨度。

Answer 1

for(var i = 0; i < 5;i++)
    {
        var g = jQuery('<span/>', {
            class: 'label label-info',
            text: 'aaaaaaaaaaa'
        });
        g.appendTo(div_firstcaption);

        div_firstcaption.append(' ');
    }