如何修正代码实现点击按钮将随机图片插入至表格列顶部？

我看了你的代码，发现几个导致功能异常的问题，现在一步步帮你修正：

问题分析 #

• HTML结构错误：你的<div class="container">没有闭合标签，这会导致DOM解析异常，浏览器自动补全的结构可能不符合预期。
• DOM操作逻辑错误：getElementsByClassName返回的是元素集合，你直接调用targetContainer.insertBefore是无效的，必须操作集合里的具体元素；而且你先执行appendChild再移到顶部，完全是多余的步骤。
• 全局变量泄漏：getRandomInt里的imn没有声明，会变成全局变量，可能引发意外的变量污染。
• 重复创建资源：每次点击按钮都重新预加载图片，没必要，预加载逻辑只需要执行一次。
• 节点复用问题：直接插入原图片节点的话，每次点击只是移动已有节点的位置，不会新增图片。

修正后的完整代码 #

HTML（修复闭合标签）

<table> 
    <tr> 
        <td> 
            <button id="initial" onclick="display_random_image1();">Beginning R</button> 
        </td> 
    </tr> 
    <tr> 
        <td> 
            <div class="container"></div> <!-- 补上闭合标签 -->
        </td> 
    </tr> 
</table>

CSS（无问题，保留原代码）

th, td { 
    border: 1px solid black; 
    width: 100px 
}

JavaScript（优化逻辑+修复错误）

// 把图片数据和预加载逻辑放到函数外，只初始化一次
const theImages = [{ 
    src: "https://i.imgur.com/Ej3qKfd.png", 
    width: "120", 
    height: "120" 
}, { 
    src: "https://i.imgur.com/P1i0O2m.png", 
    width: "120", 
    height: "120" 
}, { 
    src: "https://i.imgur.com/FRaU0bc.png", 
    width: "120", 
    height: "120" 
}]; 

const preBuffer = []; 
// 页面加载时完成图片预加载
for (let i = 0, j = theImages.length; i < j; i++) { 
    preBuffer[i] = new Image(); 
    preBuffer[i].src = theImages[i].src; 
    preBuffer[i].width = theImages[i].width; 
    preBuffer[i].height = theImages[i].height; 
} 

function display_random_image1() { 
    // 修正随机数函数，声明局部变量避免全局泄漏
    function getRandomInt(min, max) { 
        const imn = Math.floor(Math.random() * (max - min + 1)) + min; 
        return preBuffer[imn]; 
    } 

    const newImage = getRandomInt(0, preBuffer.length - 1); 
    // 克隆图片节点，否则每次点击只是移动已有节点，不会新增
    const imageClone = newImage.cloneNode(true);
    const targetContainer = document.getElementsByClassName("container")[0]; 
    // 直接插入到容器最顶部
    targetContainer.insertBefore(imageClone, targetContainer.firstChild); 
}

关键修改说明 #

1. 克隆图片节点：用cloneNode(true)复制新的图片元素，保证每次点击都添加全新的图片到顶部，而不是移动已有节点。
2. 预加载优化：把图片预加载逻辑提到函数外部，页面加载时就完成资源准备，避免重复创建图片对象。
3. DOM操作简化：直接通过insertBefore把新图片插入到容器的第一个子节点前，一步实现顶部添加效果。

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