Используя JQuery, почему я не могу вывести отдельные элементы массива, сгенерированные из DOM, когда я могу вывести полный массив?

Question

Если я сгенерирую такой массив

var elements_ar = $(".cards_my").find('img').toArray();

и смогу вывести такой объект массива (после переупорядочения)

$(".cards_my").html(elements_ar);

Почему я не могу и как мне это сделать выводить отдельные элементы в добавленные div? Когда я пытаюсь выполнить код, я получаю внутри HTML и правильно отформатированного div следующее сообщение, которое, как мне кажется, означает, что я использую объект вместо строки ....

"[object HTMLImageElement]"

Это мой выходной код

$(".cards_my").html(""); // to clear current contents
for (var i = 0; i < elements_ar.length - 1; i++) {
    $(".cards_my").append("<div  class='fullcard'>"+elements_ar[i]+"</div>");
}            

Answer 1

card_holder.append($('<div class="fullcard">').append(elements_ar[i]));

Не преобразовывать элемент в html. Просто создайте новый div, добавьте элемент к этому div и добавьте этот div к контейнеру.

Проблема в том, что попытка объединить элемент DOM со строкой приведет к превращению элемента в [object Object] потому что конкатенация строк не знает, как превратить элемент DOM в html. Поэтому, чтобы избежать этой проблемы, мы не конвертируем элемент в html. Мы просто добавляем элемент к другим элементам и удаляем преобразование из проблемы.