如果 div 没有 img 标签，则将“无图像”img 添加到 div（Javascript 或 Jquery）

Posted 2023-04-13

【中文标题】如果 div 没有 img 标签，则将“无图像”img 添加到 div（Javascript 或 Jquery）

【英文标题】：If div doesn't have img tag, add a "no image" img to div (Javascript or Jquery)

【发布时间】：2013-03-21 07:57:47

【问题描述】：

如果 div 元素还没有 img 标签，我正在尝试将 img 标签添加到 div 元素。最好的使用方法是什么？我想在 javascript 和 jquery 中都看到答案，这样可以帮助我学习，但是任何一个都可以。

我使用 .not() 和 .empty() 进行了几次 jquery 尝试，但我觉得我没有正确考虑它。

【问题讨论】：

给我们你的 jQuery 尝试。我们会给它加冰。 :) 添加一些代码

也可以有纯CSS方案

CSS 解决方案？真的？？？，我绝对有兴趣看到。

我说可以。这取决于实际问题。例如，有时您需要在上传真实图片之前向用户展示一些无图像图片。在这种情况下，您可以将其设置为背景。然而，如果你真的需要img标签，那么这就是JS工作。

【参考方案1】：

试试这个：

if($('#your_div').find('img').length==0)
   $('#your_div').prepend('<img src="img/your_image.jpg" />');

DEMO

【参考方案2】：

纯javascript不如JQuery优雅

var imgexists = false;
for (var i = 0; i < mydiv.children.length; i++) 
    if (mydiv.children[i].tagName.toLowerCase() == "img") 
        imgexists = true;
        break;
    ;
;

if (!imgexists) 
    var img = document.createElement("img");
    img.src = "some/path.png";
    if (mydiv.children.length > 0) 
        mydiv.appendChild(img, mydiv.firstChild);
     else 
        mydiv.appendChild(img);
    ;
;

【参考方案3】：

好的，你有很棒的 jQuery 解决方案，所以我会推荐纯 JS 版本：

var div = document.getElementById('div');

if (!div.querySelector('img')) 
    var img = document.createElement('img');
    img.src = 'image.png';
    div.insertBefore(img, div.firstChild);

测试：http://jsfiddle.net/9V2HR/

您可以看到，在这种情况下，vanilla JS 几乎与 jQuery 代码一样短。

【参考方案4】：

if ($("#myId img").length === 0) 
    $("#myId").append("<img src=\"https://www.google.com/images/srpr/logo4w.png\" />");

Use jQuery length

不要为纯 JavaScript 解决方案而烦恼 - 它会不必要地复杂，并且可能容易出现跨浏览器不兼容

【参考方案5】：

使用length 和find img 标签...是的前置..不做其他的东西

使用 jquery

if($('#divID').find('img').length > 0) 
   //img present so do other stuff 
else
   var img=$('<img />',src:"imgsrc.jpg");
  $('#divID').prepend(img)
;

【讨论】：

I'd like to see the answer both in javascript and jquery so it will help me learn but either one is fine.