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生成的代码非常糟糕。 我做错了什么？或者只是浏览器无法重新定位它？ 我该怎么办？ 谢谢

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

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