javascript - 为什么用 .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。如何修复？

谢谢！

标签： javascriptfullcalendar

Answer 1

您应该传入一个 DOM 元素after()。

参考。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);
}