在 HTML 元素中使用嵌套的 HTML

Question

所以最近我一直在尝试更多地了解 Bootstrap 中 HTML 的嵌套用法。

在遵循 Popovers 使用指南时，我遇到了这个问题；

<button
  id="btn3"
  type="button"
  class="btn btn-primary show"
  data-bs-toggle="popover"
  data-bs-trigger="focus"
  title="<h1><a href='#btn2'class ='btn btn-danger' onclick='innerFunc()' type='button' id='btnInner' data-bs-toggle='btn2'>click me</a> title</h1>"
  data-bs-content="content"
  data-bs-html="true"
>
  Popover!
</button>

我试图通过给定的 id 来访问这个内部<a>标记。

当我在 Javascript 中引用它时，它会将null object 返回到控制台。

有没有办法达到这个嵌套的 object？ 如果是这样，我可以在变量中保存对它的引用以供进一步使用吗？

Answer 1

在深入研究该主题时，我遇到了这篇文章；

带有 html 内容的 Bootstrap 5 弹出窗口

在这个线程中， Gregory Michael提供的答案给了我一个答案。 Apparently the options you pass via Javascript are overridden by the HTML content of the DOM object so in order to dynamically change this object you would have to pass the custom HTML in the specified object creating a separate object and overriding the other one.

谢谢@CBroe的建议。 ^^

Answer 2

您不能将 html 放在属性中，您必须遵循引导程序中的弹出规则

引导弹出框

否则，您可以通过 JS 添加自定义 html 而无需 Bootstrap

const popover = document.querySelector('[data-bs-toggle="popover"]')

之后，您可以调整并添加一些 html 到元素。