Así que últimamente he estado tratando de aprender un poco más sobre el uso anidado de HTML en Bootstrap.
Mientras seguía una guía sobre el uso de Popovers, me encontré con esto;
<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> Estoy tratando de llegar a esta etiqueta interna <a> por su identificación dada.
Cuando hago referencia a esto en mi Javascript, devuelve un objeto nulo a la consola.
¿Hay alguna forma de llegar a este objeto anidado? Si es así, ¿puedo mantener una referencia a él en una variable para su uso posterior?
Mientras investigaba más a fondo el tema me encontré con este post;
Bootstrap 5 popover con contenido html
En este hilo, la respuesta proporcionada por Gregory Michael me dio una respuesta. Aparentemente, las opciones que pasa a través de Javascript están anuladas por el contenido HTML del objeto DOM, por lo que para cambiar dinámicamente este objeto, tendría que pasar el HTML personalizado en el objeto especificado creando un objeto separado y anulando el otro.
Gracias @CBroe por tu sugerencia. ^^
no puede poner html dentro de un atributo, debe seguir las reglas de popover desde bootstrap
De lo contrario, puede agregar html personalizado a través de JS sin Bootstrap
const popover = document.querySelector('[data-bs-toggle="popover"]')Después de eso, puede modificar y agregar algo de html al elemento.