如何实现为随机生成的数组文本末尾添加图片的JS函数？

已实现一个从指定数组中随机选取单词插入div的JS函数，现在需要实现点击按钮后，在每个生成的单词末尾插入一张图片，求实现思路。

原代码片段：

var words = function() {
  var wordsArray = new Array('Sun', 'Door', 'Table', 'Moon', 'Sky', 'Chair');
  var i;
  for (i = 0; i < wordsArray.length; i++) {
    var newWords = wordsArray[Math.floor(Math.random() * wordsArray.length)];
    document.getElementById('wordhere').innerText = newWords;
  }
};

<button class="generate-button" onclick="words();">generate!</button>
<div class="title h4" id="wordhere"></div>

核心问题修正 #

原代码里的循环会反复覆盖div内容，最后只显示最后一次随机选取的单词，先调整逻辑，再实现图片插入：

关键实现步骤 #

• 改用innerHTML替换innerText：innerText只能渲染纯文本，要插入图片这类HTML元素，必须用innerHTML来解析标签。
• 拼接单词与图片HTML：把随机选中的单词和图片标签拼接成完整的HTML字符串，再插入到div中。
• 调整内容更新逻辑：如果是每次点击生成单个带图单词，直接替换div内容；如果要生成多个，就用追加的方式添加内容。

代码示例 #

场景1：每次点击生成1个带图片的单词（替换原有内容）

var words = function() {
  var wordsArray = ['Sun', 'Door', 'Table', 'Moon', 'Sky', 'Chair'];
  // 随机挑选一个单词
  var randomWord = wordsArray[Math.floor(Math.random() * wordsArray.length)];
  // 拼接图片标签，替换成你的实际图片地址，可自行调整样式
  var content = `${randomWord} <img src="your-image.png" alt="word-icon" style="width:20px; height:20px; margin-left:8px;">`;
  // 插入到目标div
  document.getElementById('wordhere').innerHTML = content;
};

场景2：每次点击生成多个带图片的单词（追加到div中）

var words = function() {
  var wordsArray = ['Sun', 'Door', 'Table', 'Moon', 'Sky', 'Chair'];
  var targetDiv = document.getElementById('wordhere');
  // 可选：清空原有内容，避免重复追加
  targetDiv.innerHTML = '';
  for (var i = 0; i < wordsArray.length; i++) {
    var randomWord = wordsArray[Math.floor(Math.random() * wordsArray.length)];
    var itemContent = `${randomWord} <img src="your-image.png" alt="word-icon" style="width:20px; height:20px; margin-left:8px;"> `;
    // 追加内容到div
    targetDiv.innerHTML += itemContent;
  }
};

注意事项 #

• 把代码里的your-image.png替换成实际的图片路径（本地相对路径或网络URL均可）。
• 推荐把图片样式写到CSS类里，比如定义.word-icon { width:20px; height:20px; margin-left:8px; }，然后给图片加class="word-icon"，避免内联样式冗余。
• 如果需要避免重复选取相同单词，可以在每次选中后从数组中移除对应元素（根据需求选择）。

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