无法显示JavaScript DOM设置的HTML中Bootstrap Popover内容问题

你的问题出在Popover实例化的顺序上：你先创建了Popover实例，之后才修改data-bs-content属性，但Bootstrap Popover在初始化时就已经读取了属性值，后续修改属性不会自动同步到已创建的实例中。

方法一：先修改属性再初始化Popover #

调整代码顺序，先更新data-bs-content，再创建Popover实例，这样初始化时就能读取到新的HTML内容：

// 先修改data-bs-content属性
document.getElementById("popcart").setAttribute('data-bs-content', '<h5>Cart for your items in my shopping cart</h5>');

// 再初始化所有Popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl,{
      html: true
    })
});

方法二：通过Popover实例更新内容（适合已初始化的场景） #

如果无法调整初始化顺序，可以先获取目标按钮的Popover实例，调用setContent方法直接更新内容：

// 先初始化Popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl,{
      html: true
    })
});

// 获取目标Popover实例
var popcartPopover = bootstrap.Popover.getInstance(document.getElementById("popcart"));
// 直接设置HTML内容
popcartPopover.setContent({
  '.popover-body': '<h5>Cart for your items in my shopping cart</h5>'
});

注意事项 #

• 确保已正确引入Bootstrap的CSS和JS文件（Popover依赖Popper.js，需一并引入）。
• 初始化时必须设置html: true，否则HTML标签会被转义为纯文本显示。

内容的提问来源于stack exchange，提问作者Akanksha Pandey