Javascript 如何使用jqueryappendto在同一行中追加标签文本？

我想在单击“添加标签”按钮时为标签添加文本，如下图所示

值1、值2、值3等

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

添加标签
$（文档）.ready（函数（）{
var i=0；
变量labelID=''；
$（“#添加按钮”）。单击（函数（）{
i=i+1；
labelID='label'+i+'，'；
$('', {
})
.addClass（“标签”）
.附于（“持有人”）；
$('', {
“持有人”
})
.attr（'id'，labelID）
.text（“值”+i）
.附于（“#持有人”）
。单击（功能（e）{
变量名称=$（'#'+labelID）.text（）；
警报（“触发的事件：文本为：“+e.currentTarget.textContent+”\n标签id为：“+e.currentTarget.id”）；
});    
$(' , ')
.附于（“持有人”）；
});
});

div

类似于一个块，因此它占用了整个空间，您的下一个元素在div之后开始，默认情况下

div

显示属性为块，将其更改为内联，这样它就不会占用所有空间，并允许前面的元素在一行中显示所有内容：

$('<div> , </div>').css("display","inline")

css（“显示”、“内联”）

---

只是不要使用块级元素

$（文档）.ready（函数（）{
var i=0；
变量labelID=''；
$（“#添加按钮”）。单击（函数（）{
i=i+1；
labelID='label'+i+'，'；
$('')
.addClass（“标签”）
.附于（“持有人”）；
$('', {
“持有人”
})
.attr（'id'，labelID）
.text（“值”+i）
.附于（“#持有人”）
。单击（功能（e）{
变量名称=$（'#'+labelID）.text（）；
警报（“触发的事件：文本为：“+e.currentTarget.textContent+”\n标签id为：“+e.currentTarget.id”）；
});    
$(' , ')
.附于（“持有人”）；
});
});

希望这就是你想要实现的

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

$（文档）.ready（函数（）{
var i=0；
变量labelID=''；
$（“#添加按钮”）。单击（函数（）{
i=i+1；
$（'Value'+i+'，'）。附于（'holder'）；
});
});

$（文档）.ready（函数（）{
var i=1；
$（“#添加按钮”）。单击（函数（）{
$（“#holder”）。追加（“Value”+i+，”；
i++；
});
});

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

});

});

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

$(document).ready(function() {

    var i = 1;

    $("#addButton").click(function(){
        $('#holder').append("<label for='holder' id=label"+i+">Value"+i+", </label>");
        i++;
    });

});