I'm trying to prepend an img tag to a div element if the div element doesn't have an img tag already. What is the best method to use? I'd like to see the answer both in javascript and jquery so it will help me learn but either one is fine.

I've made a few jquery attempts using the .not() and the .empty() but I feel I'm not thinking correctly about it.

I'm trying to prepend an img tag to a div element if the div element doesn't have an img tag already. What is the best method to use? I'd like to see the answer both in javascript and jquery so it will help me learn but either one is fine.

I've made a few jquery attempts using the .not() and the .empty() but I feel I'm not thinking correctly about it.

• javascript
• jquery
• image
• prepend

• Give us your jQuery attempts. We will add ice to it. :) Add some code – codeVerine Commented Mar 21, 2013 at 8:00
• there can also be pure CSS solution – dfsq Commented Mar 21, 2013 at 8:02
• CSS solution? Really???, I'm definitely interested in seeing that. – Oneezy Commented Mar 21, 2013 at 8:10
• I said can. It depends on actual problem. For example sometimes you need to present user some noimage picture before real one is uploaded. In this case you can set it as background. If however you really need img tag, then this is JS job. – dfsq Commented Mar 21, 2013 at 8:20

5 Answers 5

Try this:

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

DEMO

Pure javascript is not so elegant as 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);
    };
};

Ok, you have great jQuery solutions so I will propose pure JS version:

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

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

Tests: http://jsfiddle/9V2HR/

As you can see vanilla JS is almost as short as jQuery code in this case.

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

Use jQuery length

Don't bother with a pure JavaScript solution - it will be unnecessarily plex and possibly prone to cross-browser inpatibility

use length and find the img tag...yes prepend..no do other sttuff

using jquery

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