Not able to display content in html ,which is in javascript DOM

Question

JavaScript part

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 part

<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>)

I was trying to show <h5> content which is in JavaScript in data-bs-content in HTML

Answer 1

When you create popoverTriggerList you set the values contained therein at that point. If you move the call to modify the dataset attribute to before that it will work.

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>