JavaScript: Why doesn't insertAdjacentHTML - afterEnd work?

Question

JavaScript

Good afternoon!
Looping through the elements of an array:

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

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

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

As a result, I get the following structure:

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

And you need to get this:

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

Why doesn't this construct work?

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

How to add a closing tag </a>- after the current element?
Thank you!

Answer 1

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