jquery - 使用 jquery 设计动态芯片 - chipSetEl.appendChild 不是函数

Question

当用户从下拉列表中选择一个选项时，我正在尝试添加标签。所以他们可以选择多个项目，然后在下面会有标签来展示这些选择。

我目前的尝试，试图取自：https ://material.io/develop/web/components/chips/

 <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">   
<div class="mdc-chip-set mdc-chip-set--input" role="grid"></div>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script type="text/javascript">
  const chipSetEl = mdc.chips.MDCChipSet.attachTo(document.querySelector('.mdc-chip-set'));
  //const chipSet = new mdc.chips.MDCChipSet(chipSetEl);

  $(function() {
    $(document).on("change", '#search_selectWrap', function() {
      const chipEl = document.createElement('div');
      // ... perform operations to properly populate/decorate chip element ...
      chipSetEl.appendChild(chipEl);
      //chipSet.addChip(chipEl);
    });
  });
</script>

我的错误目前是：

chipSetEl.appendChild 不是函数

但是，如果我取消注释芯片集初始化，我也会收到错误消息：

this.root_.querySelectorAll 不是函数

芯片组 el console.log：

编辑

chipSetEl的新定义和定制化的尝试：

const chipSetEl = document.querySelector('.mdc-chip-set');
const chipSet = new mdc.chips.MDCChipSet(chipSetEl);
console.log(chipSetEl);

$(function()
{
    $(document).on("change", '#search_selectWrap',function ()  {
        const chipEl = document.createElement('div');
        chipEl.shouldRemoveOnTrailingIconClick = true;
        chipEl.innerHTML = "hi";
        chipEl.style["background-color"] = "green"; 
        // ... perform operations to properly populate/decorate chip element ...
        chipSetEl.appendChild(chipEl);
        chipSet.addChip(chipEl);
    });
});