JavaScript：如何将img标签移入div且不重新加载图片？

问题里的代码因为使用了cloneNode()创建图片副本，导致浏览器重新发起图片请求。要实现将img移入div且不重新加载图片，核心是直接操作原DOM节点，而不是克隆它。

正确代码示例 #

const div = document.createElement('div');
const span = document.createElement('span');
const img = document.querySelector('img');

// 先将span添加到div容器
div.appendChild(span);
// 直接把原img元素移入div（移动操作会自动将img从原父节点移除）
div.prepend(img); // 用prepend保证img在span前面，和原代码逻辑一致

如果需要严格保证div完全替换原img的位置，可以用更严谨的写法：

const div = document.createElement('div');
const span = document.createElement('span');
const img = document.querySelector('img');
const parent = img.parentNode;

// 先让div替换原img的位置
parent.replaceChild(div, img);
// 再把原img和span移入div
div.appendChild(img);
div.appendChild(span);

原理说明 #

• 克隆节点（cloneNode()）会生成全新的DOM元素，即使复制了src属性，浏览器仍可能重新发起图片请求（取决于缓存配置，但无法100%避免）。
• 直接移动原DOM节点时，只是改变它在DOM树中的层级位置，元素本身没有被重新创建，浏览器不会再次加载已缓存的图片资源。

内容的提问来源于stack exchange，提问作者kodfire