How to add an image inside a dynamically created div?

问题

I am creating a dynamic div inside my javascript with the following code:

 var div = $('<div id="a1"></div>').html("<font color=green>This is demo</font>"); 

I want to add an image above this text inside the dynamically created div but i am not getting how to achieve it.

I am creating dynamic divs using a for loop and want to add images at the same time in it.

for(var i=0; i<size; i++)
    {
        //alert("Title for zeroth manual is: "+result.manuals[i].title);
        var div = $('<div id="a1"></div>').html("<font color=green>This is demo..</font>"); 
        $('#a1').prepend("<img src='iphone.png' />");
        $('#data').append(div);
    }

How can i do it? Please help.

回答1:

I tried this and its working fine for me.

var elem = document.createElement("img");
      elem.setAttribute("src", "http://img.zohostatic.com/discussions/v1/images/defaultPhoto.png");
      elem.setAttribute("height", "30");
      elem.setAttribute("width", "30");
      document.getElementById("maindiv").appendChild(elem);

回答2:

var div = $('<div id="a1"></div>');
div.html("<font color=green>This is demo</font>");
div.prepend('<img src="...">');

回答3:

This is how I would do it.

var div = $('<div/>',{id:"a1"});
$("<font/>",{color:"green"}).html("This is demo").appendTo(div);
div.prepend('<img/>',{src:"test.jpg"});

回答4:

var div = $('<div id="a1"></div>').html("<img src='iphone.png' /><font color=green>This is demo</font>");

$('#test').append(div);

回答5:

(Edited for the edit of the question)

You can simply add it to the html:

for(var I = 0; I < size; I++) {
    //alert("Title for zeroth manual is: "+result.manuals[I].title);
    var div = $('<div id="a'+ I + '"></div>').html('<img src="iphone.png" /><font color="green">This is demo..</font>'); 
    $('#data').append(div);
}

You need different ids for your divs (the id is now a1, a2, ...)

回答6:

try -

for( var i = 0; i < size; i++ ) {
    var fontObj = $( '<font color=green>This is demo..</font>' );
    var imgObj = $( '<img src=".."/>' );

    var divToInsert = $( '<div id="a' + i + '"/>' );

    imgObj.appendTo( divToInsert );
    fontObj.appendTo( divToInsert );

    $('#data').append( divToInsert  );
}

hope it works :)

回答7:

Maybe this will help someone!

Adding an image in dynamically generated div using Vanilla JS -

You can use either backgroundImage property if you want to add an image to the div, or add an img tag in the div.

Using backgroundImage Property :

function myFunction(){
  //create a div element
  let cross = document.createElement("div");

  //add required properties
  cross.style.height="200px";
  cross.style.width="200px";
  cross.style.backgroundImage = "url('your_image.png')";

  //append div as a child to body
  document.body.appendChild(cross);
}

Using an Image Tag:

function myFunction() {
      //create a div element
      var div = document.createElement("div");
      
      //create an image element
      var img = document.createElement("img");
      
      //add image src property
      img.src="https://www.google.com/logos/doodles/2021/new-years-day- 
      2021-6753651837108820-law.gif";
      
      //append div as a child to body
      document.body.appendChild(div);
      
      //append image as a child to div
      div.appendChild(img);
    }

I prefer using second approach, as you will have much control over stylings.

Cheers!

回答8:

I believe you are referring to the div incorrectly.

try $("div#a1").html....

This is called selectors. Will be of use to read up on them.

来源：https://stackoverflow.com/questions/19222395/how-to-add-an-image-inside-a-dynamically-created-div