Добавление div с идентификатором класса и изображением к контейнеру

Question

Я боролся с этим уже несколько дней. Я хотел бы добавить div с идентификатором класса и изображением к своему контейнеру. Я смог отрендерить карты, но после проверки инструментов HTML в dev я наткнулся на это

<div class="hidden-container card-image" id="card-id-1" "=""> 
<img src="../images/avatar.png" <="" div="">
</div>

, что удивляет меня пустое = <= и пустое div. Их, очевидно, здесь быть не должно.

Я рендерину div'ы примерно так:

    $.each(cards, function (index, props) {
        $("#card-area").append('<div class="hidden-container card-image" id=card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
    });

Кто-нибудь сможет правильно отформатировать это? последние пару дней у меня болит голова.

Answer 1

забудьте закрыть img -tag

<div class="hidden-container card-image" id="card-id-1" "=""> 
   <img src="../images/avatar.png" <="" div="">
   </img>
</div>

и отметки id="card-id-'

$.each(cards, function (index, props) {
    $("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});

Answer 2

1.Вы пропустили " вокруг id

2.Вы пропустили также закрытие <img> тега

$.each(cards, function (index, props) {
  $("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"></div>');
});