jQuery append（）：標記關閉之前，它應該

Question

我有這個jQuery代碼，我檢索數據，我想顯示在bootswatch（bootstrap）超級英雄列表組的結果。

我有代碼：

$('#eventos_stats').html('<h2>Events</h2>'); 
$('#eventos_stats').append('<ul class="list-group"><li class="list-group-item"><span class="badge">'+response.numero_eventos+'</span>Total events</li>'); 
$('#eventos_stats').append('<li class="list-group-item"><span class="badge">'+response.asistencia_eventos+'</span>Total attendees</li></ul>'); 

的問題是，對於關閉的第一個結果，上榜的羣體去看待分離或分割的，而不是渲染的結果放在一起。

也就是說，顯示的HTML是：

<ul class="list-group"><li class="list-group-item"><span class="badge">3</span>Número de eventos</li></ul> 
<li class="list-group-item"><span class="badge">245</span>Número de asistentes</li> 

可以注意到</ul>關閉之前，即使我將其追加在最後。這是問題。它應該是這樣的：

<ul class="list-group"><li class="list-group-item"><span class="badge">3</span>Número de eventos</li> 
<li class="list-group-item"><span class="badge">245</span>Número de asistentes</li></ul> 

這究竟是爲什麼？我怎樣才能使結束標籤顯示在最後？

Answer 1

你可以簡單地改變第二附加追加到類的無序列表

$('#eventos_stats').html('<h2>Events</h2>'); 
$('#eventos_stats').append('<ul class="list-group"><li class="list-group-item"><span class="badge">'+response.numero_eventos+'</span>Total events</li>'); 
$('.list-group').append('<li class="list-group-item"><span class="badge">'+response.asistencia_eventos+'</span>Total attendees</li></ul>'); 

Answer 2

您誤解了append的工作方式 - 您必須在每次調用中追加整個元素。您不能在一次調用中追加元素的開始標記，然後在另一箇中關閉它。

試試這個：

$('#eventos_stats').append('<ul class="list-group"><li class="list-group-item"><span class="badge">'+response.numero_eventos+'</span>Total events</li><li class="list-group-item"><span class="badge">'+response.asistencia_eventos+'</span>Total attendees</li></ul>'); 

Answer 3

你的第三條線可以

$('#eventos_stats ul').append('<li class="list-group-item"><span class="badge">'+response.asistencia_eventos+'</span>Total attendees</li>');