如何指定displayRandomHats函数生成的随机图片在网页中的显示位置

步骤1：准备HTML容器 #

先在页面里添加一个用于展示图片的div，给它一个唯一ID方便JS获取：

<div id="hat-display"></div>

步骤2：修改JavaScript代码 #

下面是调整后的完整代码，关键修改处已标注：

function displayRandomHats() {
  // 图片数组（保持原定义不变）
  var imageArray = [
    { src: "Images/GreenGiantsHat.JPEG", width: "200", height:"200" },
    { src: "Images/LMUHat.JPEG", width: "200", height: "200" },
    { src: "Images/NYHat.JPEG", width: "200", height: "200" },
    { src: "Images/OrangeGiantsHat.JPEG", width: "200", height: "200" },
    { src: "Images/WolfHat.JPEG", width: "200", height: "200" }
  ];

  // 预加载图片（逻辑保持不变）
  var newArray = [];
  for (var i = 0; i < imageArray.length; i++) {
    newArray[i] = new Image();
    newArray[i].src = imageArray[i].src;
    newArray[i].width = imageArray[i].width;
    newArray[i].height = imageArray[i].height;
  }

  // 获取随机图片函数（逻辑保持不变）
  function getRandomNum(min, max) {
    imgNo = Math.floor(Math.random() * (max - min + 1)) + min;
    return newArray[imgNo];
  }

  var newImage = getRandomNum(0, newArray.length - 1);

  // ====== 修改1：清空目标div内的旧图片 ======
  var targetDiv = document.getElementById('hat-display');
  targetDiv.innerHTML = ''; // 直接清空容器内容，比遍历删除更高效

  // ====== 修改2：将图片插入目标div ======
  targetDiv.appendChild(newImage);
}

你之前尝试失败的原因 #

• document.write会直接覆盖整个页面的HTML内容，完全不适合局部更新；
• 给函数分配ID是错误思路——函数不是DOM元素，无法通过ID绑定到div上；
• 原代码中“移除旧图片”的循环是空的，根本没执行删除操作，会导致每次调用都新增图片。

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