1

В переменную массива вписываю все изображение. В консоле по факту проверяю и имею 4 элемента где в каждом несколько своих HTML элементов.

var allimg = [];
allimg[allimg.length] = document.getElementById('carouselImg' + 
i).getElementsByTagName("img");

Далее в цикле хочу вставить их в тело блока.

for (var i = 0; i < 3; i++) {

  $("#myid").append('<div class="myclass">' + allimg[0][1]+'</div>');
}

По факту получаю вот такое в консоле.

<div class="myclass">[object HTMLImageElement]</div>

Хотя в переменной вроде все правильно записано. В консоле проверяю и там есть массив с изображениями, правда как понял он зубчатый как мне и надо. Как мне вставить в блок изображение с зубчатого массива?

1
  • Конкатегация приводит объект к строке, в данном случает это объект типа HTMLImageElement. Попробуйте сделать элемент из строки <div class="myclass"> и добавить в него allimg[0][1], и после этого добавить его в #myid 16 авг 2018 в 16:35

2 ответа 2

1

У Вас в allimg сам элемент, а не его HTML код. В этом случае следует сделать так:

let someElement = document.createElement("div");
someElement.innerHTML = "Hi! i'm div!";
someElement.className = "red";

$("#something").append("<div class=\"wrapper\">" + someElement + "</div>"); // так делаете Вы.
$("#something").append("<div class=\"wrapper\">" + someElement.outerHTML + "</div>"); // так нужно делать.
.red {
  color: red;
  opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="something">
     Something maybe here.
</div>

1

Конкатегация приводит объект к строке, в данном случает это объект типа HTMLImageElement. Попробуйте сделать элемент из строки и добавить в него allimg[0][1], и после этого добавить его в #myid

let images = $('img')

for (var i = 0; i < 3; i++) {
  let wrap = $('<div class="myclass">')
  wrap.append(images[i])
  $("#myid").append(wrap);
}
#myid {
  background: yellow;
}

.myclass {
  background: green;
  width: 100px;
  text-align: center;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://picsum.photos/50/50">
<img src="https://picsum.photos/50/50">
<img src="https://picsum.photos/50/50">

<div id="myid"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.