Element.setAttribute 仅反映在控制台上

Question

我真的是 Web 开发的新手。在 HTML 中尝试一些 JavaScript 时，我尝试更改元素的内容。当我执行下面的代码时，我在控制台中得到了“更新的内容”，这是我想要的结果。但是，弹出窗口中的内容不会更新。

为什么只在控制台更新而不在网站上更新？

$(function() {
  $('[data-bs-toggle="popover"]').popover()
  document.getElementById('rex').setAttribute('data-bs-content', 'Updated Content');
  console.log(document.getElementById('rex').getAttribute('data-bs-content'));
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>

<body>
  <a id='rex' href="#" title="Header" data-bs-toggle="popover" data-placement="top" data-bs-content="Content">Click</a>
</body>

</html>

Answer 1

如果您想更改弹出窗口已经可见后出现的内容，您需要更新弹出窗口本身：

document.getElementsByClassName('popover-body')[0].textContent = 'Updated Content';

Answer 2

我仍然不确定你要更新什么，但看看这个。我没有更改您的 html 中的任何内容。我正在为 #rex link 创建一个点击绑定，它更新了几件事……我的评论在下面。我也只使用 jquery 语法。您发布的内容是 jquery 和一些纯粹的 javascript 的混合搭配。尽早注意差异会对您有很大帮助，但目前 Bootstrap 需要 jquery 这没什么大不了的。

 $(document).on('click', '#rex', function() {
    $(this).text('Updated Content');                          //text of the anchor
    $(this).attr('data-bs-content', 'Updated Content');       //text of the popover
    $(this).popover('show');                                  //trigger popover to show
    // $(this).popover('toggle');                             //or use a toggle
 });

https://jsfiddle.net/otzyd54h/

Element.setAttribute 仅反映在控制台上

Element.setAttribute only reflects on console

html

javascript

jquery

bootstrap-5