我对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>我仍然不确定你想要更新什么，但是看看这个。我没有更改html中的任何内容。我正在为#rex链接创建一个点击绑定，它更新了一些东西…我的评论如下。我也只使用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/
如果你想改变在弹出窗口已经可见之后出现的内容，你需要更新弹出窗口本身:
document.getElementsByClassName('popover-body')[0].textContent = 'Updated Content';