JavaScript: почему не срабатывает insertAdjacentHTML — afterEnd?

Question

[Shimpanze]

Добрый день!

Перебираю элементы массива:

tempImages.forEach(function(item, i, arr) {
  var img = new Image();

  // здесь собираю нужный мне img

  // далее, мне необходимо обернуть элемент item (объект изображения) в ссылку
  item.insertAdjacentHTML('beforeBegin', '<a href="' + href + '">');
  item.outerHTML.insertAdjacentHTML('afterEnd', '</a>');
});

В итоге, получаю вот такую конструкцию:

<a href="..."></a>
<img />

А нужно получить такую:

<a href="...">
  <img />
</a>

Почему не срабатывает вот эта конструкция?:

item.outerHTML.insertAdjacentHTML('afterEnd', '</a>');

Как добавить закрывающий тег </a> - после текущего элемента?

Спасибо!

Answer 1

[Сергей Мельников]

var anchor = document.createElement("a");
anchor.href = href;
anchor.appendChild(item);

Comments

[Shimpanze]

Спасибо!

Но теперь пустое место вместо элемента... Можно ли, как-нибудь явно добавить открывающий и закрывающий тег ссылки в виде строк?

[Сергей Мельников]

Shimpanze, да, работать с innerHTML как со строкой

var str = "";
someArray.each(function() {
  var href = "...";
  str += "<a href=" + href +">";
  str += "<img src="src">";
  str += "</a>";
})
parent.innerHTML = str