Act over a variable created div-CodePudding

I am trying to access the div that I am creating using a variable that gets the local storage keys. The div is being created correctly but when I am trying to append something to that created div it does nothing.

<div  id="basket-modal" tabindex="-1">
    <div >
      <div >
        <div >
          <h5 >Basket items:</h5>
          <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div >
        </div>
        <div >
          <button type="button"  data-bs-dismiss="modal">Close</button>
          <button type="button" >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");
        });
    })

Image where you can see the created div but nothing inside

CodePudding user response：

try to append p tag along with the div.

$('.modal-body').append('<div id="'   key   '"><p class='d-block'>"   key   " => "   
value   "</p></div>');