javascript – How to move an img tag into a div without reloading the image?

const div = document.createElement('div');
const span = document.createElement('span');
const img = document.querySelector('img');
const imgCloned = img.cloneNode();
div.appendChild(imgCloned);
div.append(span);
img.replaceWith(div);

It is working and the img is being moved into the div element, however, because it is a cloned image, there is another request to get the image. How can I move the img into the div without reloading the image?

>Solution :

re-order what you’re doing

replace the image and then add the image to the beginning of the div

const div = document.createElement('div');
const span = document.createElement('span');
const img = document.querySelector('img');
div.append(span);
img.replaceWith(div);
div.insertAdjacentElement('afterbegin', img);

<div>
  The image is here
  <img src="https://placekitten.com/200/300">
  <span> other things live here </span>
</div>