如何从json对象添加mdc-web子标头？

Question

所以，我试图在某个类别的每个列表之前放置一个子标题。我使用的是material.io，这是我的AJAX成功代码......

    request.done(function (body) {
    $.each(body.categories, function (idx, obj) {
        console.warn(obj.name)
        $("#productGroup").append('<h3 class="mdc-list-group__subheader">'+obj.name+'</h3>');
        $.each(obj.packages, function (idx, pack) { 
            console.log(pack.name);
            $("#productList").append(' <li class="mdc-list-item"><img class="mdc-list-item__start-detail" src="https://unsplash.it/200?random&blur" width="56" height="56" alt="Picture of Janet Perkins"> <span class="mdc-list-item__text"> '+pack.name+' <span class="mdc-list-item__text__secondary">'+pack.price+'</span> </span> <a class="mdc-list-item__end-detail material-icons" aria-label="View more information" title="More info" onclick="event.preventDefault();"> add_shopping_cart </a> </li>');
        });
    });
});

但是当我看着我得到这个： https://i.imgur.com/wUQoFrK.png（他们都在底部）

我该如何解决？