Jquery 如何将变量附加到与文本相同的行

我们想在每次追加后添加一个计数器，但它被放在单独的行中

<script>
var counter = 0;
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ul").append("<li>Champlain</li>",(counter));


  });
});
</script>

var计数器=0；
$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
$（“p”）。追加（“追加文本”）；
});
$（“#btn2”）。单击（函数（）{
$（“ul”）。追加（“
Champlain
”，（计数器））；
});
});

$（“ul”）.append（“
Champlain”+counter.toString（）+”
”）
$（“#btn2”）。单击（函数（）{
$（“ul”）。追加（“
Champlain”+计数器+++”
”；
});
$（“ul”）。追加（
Champlain“+（计数器++）+”
）；
您正在添加一个
，然后添加更多文本<代码>

是一个块元素，它始终是一个独立于它之前或之后的水平块。（除非CSS另有说明。）

将计数器放在元素内部

$("ul").append($("<li>").append("Champlain" + String(counter)));

$（“ul”）.append（$（“
”）.append（“Champlain”+字符串（计数器））；

我还喜欢不使用字符串构建HTML，除非绝对必要。：）

您可以这样做，

$（“p”）.append（“追加文本”。+计数器）
$("ul").append("<li>Champlain " + (counter++) + "</li>");

$("ul").append($("<li>").append("Champlain" + String(counter)));