【问题标题】：Append an image to a div using jquery?使用jquery将图像附加到div？
【发布时间】：2023-03-24 19:30:01
【问题描述】：

Currently 我想在 for 循环中创建的 div 中附加图像。图像将附加到#hiddenItems。我不知道如何在这个 for 循环中放置一个包含图像的 div。我想在通过这个 for 循环创建的描述框上放置一个图钉图标。

有没有办法做到这一点？这个问题够清楚吗？任何帮助将不胜感激。

for(var x = 0; x < itemIDs.length; x++) {
  console.log("x: " + x);
  $('<div class="' + itemClass1s[x] + ' hidden" id="hidden' + itemIDs[x] + '"  style="left: ' + itemXs[x] + 'px top:' + itemYs[x] + 'px;">' + itemContents[x] +'<img src="pin_red.png">' + '</div>').appendTo($('#hiddenItems'));
}

【问题讨论】：

尝试使用这个api.jquery.com/append和文档
为什么在这个循环中？然后，您创建多个图像，您不只是希望将一个图像附加到#hiddenItems 吗？还是我弄错了？
您在 style 属性中的 CSS 语句之间缺少 ;。 appendTo() 中的 jQuery 对象也是多余的；只需使用字符串选择器
我把它放在这个循环中是因为循环在地图上创建描述框，数据来自 XML 文件。我想拍摄一个图钉的图像并将其附加到按下按钮后显示在地图上的描述框的一角。我正在使用图钉图像进行更精确的显示。

标签： jquery html css for-loop append

【解决方案1】：

解决方案

在$('#hiddenItems') 上使用append()...

for(var x = 0; x < itemIDs.length; x++) {
  var $element = $('<div/>');

  // Build the element this way for less headaches
  $element
    .addClass(itemClass1s[x] + ' hidden')
    .attr('id', 'hidden' + itemIDs[x])
    .css({left: itemXs[x] + 'px', top: itemYs[x] + 'px'})
    .html(itemContents[x]);

  $('#hiddenItems').append($element);
}

【讨论】：