Estoy tratando de acceder al div que estoy creando usando una variable que obtiene las claves de almacenamiento local. El div se está creando correctamente, pero cuando intento agregar algo a ese div creado, no hace nada.
<div class="modal" id="basket-modal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Basket items:</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Pay</button> </div> </div> </div> </div> </body>
$(document).ready(function(){ $('#addToCart').click(function(){ $('.modal-body-basket').empty(); for(var i = 0; i < localStorage.length; i++){ var key = localStorage.key(i); var value = localStorage.getItem(key); $('.modal-body').append('<div id="' + key + '"></div>'); var div = $('#' + key); alert(div); div.append("<p class='d-block'>" + key + " => " + value + "</p>"); // $('.modal-body-basket').append("<button type='button' class='d-block' id=" + key + "> X </button>"); } $('#basket-modal').modal("show"); }); })
intente agregar la etiqueta p junto con el div.
$('.modal-body').append('<div id="' + key + '"><p class='d-block'>" + key + " => " + value + "</p></div>');