jQuery函数生成的HTML看起来很有线

Question

我有一个代码，它可以正确显示我的Shopping Cart物品。然后将其放入Jquery函数，然后将生成的代码/项目连接起来。

  

我需要更正Jquery函数。

原始代码（此代码正确显示了项目）

    <div class="media">
<a href="shop-single.html"><img src="~/personalized_chocker.jpg" alt="Hanes Hooded Sweatshirt" width="50" height="50"></a>
<div class="media-body">
    <a href="#" title="Hanes Hooded Sweatshirt">Hanes Hooded Sweatshirt</a>
    <span class="qty">1</span> x <span class="price">$18.56</span>
    <button type="button" class="close" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" 
    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
    class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" 
    y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg></button>
</div>
</div>

jQuery函数（将上述代码添加到函数中）

function ItemAddSection(ItemName, ImageUrl, Price) {

$("#popcart").append('<div class="media">');
$("#popcart").append('<a href="shop-single.html"><img src=' + ImageUrl + ' width="50" height="50" alt=""></a>');
$("#popcart").append('<div class="media-body">');
$("#popcart").append('<a href="shop-single.html" title="Hanes Hooded Sweatshirt">' + ItemName + '</a>');
$("#popcart").append('<span class="qty">1</span> x <span class="price">' + Price + '</span>');
$("#popcart").append('<button type="button" class="close" aria-label="Close" onclick="btnpopitemclose()"><i data-feather="x-circle"></i></button>');
$("#popcart").append('</div>');
$("#popcart").append('</div>');
popcartItemCount++;
$("#popcartItemCount").html(popcartItemCount);
}

jQuery函数生成的html代码（项目显示为已连接。）

     <button type="button" class="close" aria-label="Close" onclick="btnpopitemclose()">
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
 <circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line>
 <line x1="9" y1="9" x2="15" y2="15"></line></svg></button><span class="qty">1</span> x <span class="price">890.00</span>
 <a href="shop-single.html" title="Hanes Hooded Sweatshirt">Personalized Chocker</a><div class="media-body">
 </div><a href="#"><img src="~/personalized_chocker.jpg" alt="" width="50" height="50"><div class="media"></div>
 </a>