页面加载后将EJS部分与JQuery附加在一起吗？

Question

当用户单击站点上的按钮时，我试图将新的EJS部分添加到我的页面上；但是，由于页面已经加载，因此EJS部分将以HTML文本而不是EJS呈现。示例：

我的JQuery代码：

var lunchRefreshButton = $(".myRefreshButtonLunch");        
lunchRefreshButton.click(function() {
              var outerParent = $(this).closest(".lunch__items__container");
              var randomFoodItem = '<div class="food__item__image">\
                                      <img class="food__image" src="<%=newFoodItem.image%>">\
                                    </div>\
                                    <div class="food__item__info">\
                                      <p class="lunch__name"><%=newFoodItem.name%></p>\
                                      <p class="food__info">Servings: <%= newFoodItem.nutrition.serving_size %></p>\
                                    </div>\
                                    <div class="myBtn">\
                                      <div class="refreshContainer">\
                                        <i class="fa fa-sync-alt fa-lg myRefreshButtonLunch"></i> \
                                      </div>\
                                      <i class="fa fa-info-circle fa-lg myBtnBtnLunch"></i>\
                                    </div>';

              outerParent.append(randomFoodItem);
           });

这是EJS的示例：

    <div class="lunch__items__container">
           <div class="refreshContainer">
              <i class="fa fa-sync-alt fa-lg myRefreshButtonLunch"></i> 
           </div>
           <% var random = Math.floor(Math.random() * 30); %>
           <% var newFoodItem = extraLunchArr[random]; %>
           //appended item is supposed to go here
    </div>

页面的外观如下：https://i.imgur.com/0JWoVgB.png

非常感谢您的帮助。