javascript - 如何使用 jQuery appendTo 在同一行中追加标签文本？

Question

我想在单击“添加标签”按钮时在一行中附加标签文本，如下所示，

值1、值2、值3等等...

但是我无法实现我想要的，这里出了什么问题？这是 jsfiddle。

http://jsfiddle.net/KendoDev/7ot577qp/

<div style="display:inline">
    <button id="addButton" > Add Label </button>

</div>
<div id="holder">




  $(document).ready(function() {
    var i = 0 ;
    var labelID = '';
    $("#addButton").click(function(){
     i = i+1; 
        labelID= 'label'+i+ ',';
        $('<div />', {

        })
            .addClass("label")
            .appendTo("#holder");
        $('<label />', {
            for: 'holder'       
        })
           .attr('id', labelID)
           .text("Value" + i)
           .appendTo("#holder")
        .click(function (e) {
                var name = $('#'+labelID).text();
            alert("event fired: text is: "+ e.currentTarget.textContent + " \n label id is:   " + e.currentTarget.id);
        });    
        $('<div> , </div>')
            .appendTo("#holder");

    });

    });

Answer 1

只是不要使用 block 级元素。

http://jsfiddle.net/KendoDev/7ot577qp/9/

$(document).ready(function() {
var i = 0 ;
var labelID = '';
$("#addButton").click(function(){
 i = i+1; 
    labelID= 'label'+i+ ',';
    $('<span>')
        .addClass("label")
        .appendTo("#holder");
    $('<label>', {
        for: 'holder'       
    })
       .attr('id', labelID)
       .text("Value" + i)
       .appendTo("#holder")
    .click(function (e) {
            var name = $('#'+labelID).text();
        alert("event fired: text is: "+ e.currentTarget.textContent + " \n label id is:   " + e.currentTarget.id);
    });    
    $('<span> , </span>')
        .appendTo("#holder");

});

});