无法显示 html 中的内容，该内容位于 javascript DOM 中

Question

JavaScript部分

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl,{
            html: true
          })
        });
        document.getElementById("popcart").setAttribute('data-bs-content', '<h5>Cart for your items in my shopping cart</h5>');

HTML部分

<button type="button" class="btn btn-secondary cart mx-2" id="popcart" data-bs-toggle="popover" title="Your cart"  data-bs-content="And here's some amazing content. It's very engaging. Right?">
          Cart(<span id="cart">0</span>)

我试图在 HTML 中的

<h5>

中显示 JavaScript 中的

data-bs-content

内容

Answer 1

当您创建

popoverTriggerList

时，您可以设置其中包含的值。如果您将修改数据集属性的调用移至之前，它将起作用。

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

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

<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


<button type="button" class="btn btn-secondary cart mx-2" id="popcart" data-bs-toggle="popover" title="Your cart" data-bs-content="And here's some amazing content. It's very engaging. Right?">
    Cart(<span id="cart">0</span>)
</button>