javascript - 如何从 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（它们都在底部）

我该如何解决？