如何使用Javascript向表格及choicesDiv插入图片（无需修改HTML&CSS）

嘿，这事儿纯靠JavaScript就能搞定，完全不用改动你现有的HTML和CSS代码。下面给你两种常见场景的实现方案：

方案1：给所有choicesDiv插入同一张图片 #

适合所有位置用相同图片的情况，逻辑简单直接：

// 等待DOM完全加载后执行，避免找不到目标元素
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有class为choicesDiv的元素
  const allChoiceDivs = document.querySelectorAll('.choicesDiv');
  
  // 遍历每个div，插入图片
  allChoiceDivs.forEach(div => {
    // 创建img元素
    const imgElement = document.createElement('img');
    // 替换成你的实际图片URL
    imgElement.src = 'your-image-url.png';
    // 设置alt属性，提升页面可访问性（建议必加）
    imgElement.alt = `选项${div.getAttribute('value')}`;
    // 可选：直接通过JS设置图片尺寸（按需调整）
    imgElement.style.width = '60px';
    imgElement.style.height = '60px';
    
    // 把图片插入到当前div中
    div.appendChild(imgElement);
  });
});

方案2：根据div的value属性插入不同图片 #

如果每个位置需要对应不同的图片（比如value=1对应image1.jpg，value=2对应image2.jpg），可以这样写：

document.addEventListener('DOMContentLoaded', () => {
  const allChoiceDivs = document.querySelectorAll('.choicesDiv');
  
  allChoiceDivs.forEach(div => {
    const choiceValue = div.getAttribute('value');
    const imgElement = document.createElement('img');
    // 根据value拼接图片地址，按需调整命名规则
    imgElement.src = `image-${choiceValue}.png`;
    imgElement.alt = `选项${choiceValue}`;
    // 可选：统一设置图片样式
    imgElement.style.width = '60px';
    imgElement.style.height = 'auto';
    
    div.appendChild(imgElement);
  });
});

重要说明： #

• 把代码放在DOMContentLoaded事件里，是为了确保页面所有元素加载完成后再执行，避免出现找不到choicesDiv的问题。
• 全程不需要修改原HTML和CSS，所有操作都是通过JavaScript动态创建并插入图片元素。
• 如果需要微调图片样式，直接通过imgElement.style设置即可，不用改动原有CSS文件。

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