为什么用 .after( 设置的文本不呈现为 html？

Question

在 Alpinejs 2 应用程序中使用 fullcalendar v4.3.1 我想在 myCustomButton 附近显示一些文本，具体取决于关于vars的当前状态。我喜欢这样做：

eventPositioned: function(view) {
    console.log('eventPositioned view::')
    console.log(view)

    // document.querySelector('.fc-myCustomButton-button').after(document.createTextNode( '<div class=\label\>test12</div>' ) );
    document.querySelector('.fc-myCustomButton-button').after('<div class="label">'+self.getFiltersCount()+'</div>');
}

在表格中，我看到文本 html 是带有 self.getFiltersCount 函数返回数据的文本：

getFiltersCount 9 但它并没有呈现为 html。如何修复？

谢谢！

Answer 1

您应该在 after() 中传递一个 DOM 元素。

参考。 MDN after()

eventPositioned: function(view) {
  console.log('eventPositioned view::');
  console.log(view);
  document.querySelector('.fc-myCustomButton-button').nextElementSibling.remove();
  const div = document.createElement("div");
  div.setAttribute("class","label");
  div.textContent = self.getFiltersCount();
  // document.querySelector('.fc-myCustomButton-button').after(document.createTextNode( '<div class=\label\>test12</div>' ) );
  document.querySelector('.fc-myCustomButton-button').after(div);
}

为什么用 .after( 设置的文本不呈现为 html？

Why text set with .after( is not rendered as html?

javascript

fullcalendar