Pobierz element w dokumencie i dodaj elementy potomne - jquery, html5, css3

Mam zestaw elementów o nazwie item-group-button w mojej hierarchii DOM. Korzystam z następującego kodu jQuery, aby uzyskać powyższy element i dołączyć nową zawartość do wewnętrznego HTML elementu.

    function getMajorGroups(){
var element = $(".item-group-button");
$.get("http://localhost:9157/getAllMajorGroups", function(data){
if(data.majorGroups.length != 0){
$(".panel_list").empty();

}
for(var i = 0; i < data.majorGroups.length; i++){
element[i].appendChild("<h3>" + data.majorGroups[i] + "</h3>");
$(".panel_list").append(element);
}
});
}

Kod elementu jest następujący.

<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Beverage</h3>
</div>

Ale kiedy uruchamiam kod, elementy nie są usuwane, a nowa treść jest dołączana do bieżącej zawartości.

To, co próbuję zrobić, to połączyć się z usługą internetową i zgodnie z otrzymanymi danymi zapełnić elementy HTML. Jeśli ktoś ma lepsze sugestie, proszę mnie oświecić!

Dziękuję Ci!

Odpowiedzi:

Myślę, że powinieneś użyć .clone() ponieważ z tego, co widzę w twoim kodzie, dołączasz element raz za razem, wytwarzając pewne zduplikowane wartości.

function getMajorGroups(){
var element = $(".item-group-button");
$.get("http://localhost:9157/getAllMajorGroups", function(data){
if(data.majorGroups.length != 0){
$(".panel_list").empty();
}
for(var i = 0; i < data.majorGroups.length; i++){
var clone = element.clone();
clone.append("<h3>" + data.majorGroups[i] + "</h3>");
$(".panel_list").append(clone);
}
});
}

Musisz mieć błędy w konsoli, nie ma appendChild w jquery.

$(".panel_list").appendChild(element);

powinno być

$(".panel_list").append(element);