javascript - Comment déplacer une balise img dans un div sans recharger l'image ?

Question

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);

Il fonctionne et le img est en train d'être déplacé dans le div Cependant, comme il s'agit d'une image clonée, il y a une autre demande pour obtenir l'image. Comment puis-je déplacer l'élément img dans le div sans recharger l'image ?

Answer 1

Juste déplacer à la division créée ...

Ce petit projet stackblitz a une fonction pour déplacer une image, il faut la forcer pour jouer avec le code.

const div = document.createElement('div');
const span = document.createElement('span');
div.append(document.querySelector('img'));
div.append(span);
document.body.insertBefore(div, document.body.firstChild);
document.querySelector(`pre`).textContent = 
  document.body.querySelector(`div`).outerHTML;

<img src="https://picsum.photos/200/300">
<h3>Your html after move</h3>
<pre></pre>

Answer 2

Réorganiser ce que vous faites

remplacer l'image et ensuite ajouter l'image au début du 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>