Заменить содержимое внутри div, используя JQuery

Question

Я делаю небольшое приложение для покупок.

Я хочу создать страницу, на которой пользователь видит содержимое своей корзины покупок при нажатии кнопки.

Я создал шаблон, в котором содержимое должно отображаться в пустом пространстве. Моя идея состоит в том, чтобы хранить каждый элемент, который пользователь выбирает в массиве. Например:

var items = ["1 Chicken", "2 Tomatoes", "3 Spinach"]

Используя этот массив, я хочу добавить эти позиции построчно в пустое пространство, а затем представить общую сумму к оплате. Вроде как квитанция. Я не уверен, как это сделать с помощью JQuery.

Кроме того, содержимое должно быть пустым, когда в корзине нет товаров.

Я провел небольшое исследование и думаю, что должен .html ()? Хотя я не уверен в логике того, чего я хочу достичь.

Вот скрипка шаблона . (Ссылки cdn по какой-то причине не работают)

Может кто-нибудь помочь мне с логикой?

Answer 1

РЕДАКТИРОВАТЬ

function getOrder()
{
   arr  = ["1 chicken","2 orange","3 milk"]
   for(i = 0;i<3;i++)
   {
     $("#elementId").append('<p>'+arr[i]+'</p><br>')
   }
}

//blank <div> tag in your page body somewhere     
<div id="elementId">

</div>
<button onclick="getOrder()">Get Order Details</button>