在 HTML 元素中使用嵌套的 HTML答案

【问题标题】：Using nested HTML in an HTML element在 HTML 元素中使用嵌套的 HTML
【发布时间】：2021-11-18 19:41:41
【问题描述】：

所以最近我一直在尝试了解更多关于在 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 对象。

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

【问题讨论】：

上面显示的代码不包含元素，它只包含title属性内的字符串形式的HTML。您将需要了解这些引导弹出框是如何工作的，以找到 when 将其转换为要显示的实际 HTML 元素的点。（它只会在弹出框显示时将元素添加到 DOM，一旦再次隐藏，该元素也会再次从 DOM 中删除。）

标签： javascript html bootstrap-5

【解决方案1】：

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

Bootstrap 5 popover with html content

在这个线程中Gregory Michael 提供的答案给了我一个答案。显然，您通过 Javascript 传递的选项被 DOM 对象的 HTML 内容覆盖，因此为了动态更改此对象，您必须在指定对象中传递自定义 HTML，创建一个单独的对象并覆盖另一个对象。

感谢@CBroe 的建议。 ^^

【讨论】：

【解决方案2】：

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

Bootstrap Popover

否则你可以通过JS添加自定义html而不用Bootstrap

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

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

【讨论】：

我不是真正的专家，但内部<a> 标记在使用href 指向另一个元素时起作用，这个另一个按钮也是一个弹出示例按钮，它会在焦点上产生一个弹出框。我也会尝试这种方法，看看它是否能产生我想要的结果。 ^^