在 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 到元素。