Soy realmente nuevo en el desarrollo web. Mientras experimentaba con un poco de JavaScript en HTML, intenté cambiar el contenido de un elemento. Cuando ejecuto el siguiente código, obtengo "Contenido actualizado" en la consola, que es el resultado deseado. Sin embargo, el contenido dentro de la ventana emergente no se actualiza.
¿Por qué solo se actualiza en la consola y no en el sitio web?
$(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>Si desea cambiar el contenido que aparece después de que la ventana emergente ya está visible, debe actualizar la ventana emergente en sí:
document.getElementsByClassName('popover-body')[0].textContent = 'Updated Content';Todavía no estoy seguro de qué es lo que está buscando para actualizar, pero eche un vistazo a esto. No cambié nada en tu html. Estoy creando un enlace al hacer clic para el enlace #rex, y actualiza varias cosas... mis comentarios están a continuación. También estoy usando solo la sintaxis de jquery. Lo que publicaste es una especie de combinación de jquery y algo de javascript puro. Te ayudará mucho al principio prestando atención a la diferencia, pero por ahora, dado que Bootstrap requiere jquery, no es gran cosa.
$(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 });