Question

我正在使用以下代码在我的javascript中创建一个动态div：

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

我想在动态创建的div中添加此文本上方的图像，但我没有得到如何实现它。

我正在使用for循环创建动态div，并希望在其中同时添加图像。

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);
    }

我该怎么办？请帮忙。

Answer 1

我试过这个，它对我来说很好。

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);

Answer 2

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

Answer 3

（编辑问题时编辑）

您只需将其添加到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);
}

你的div需要不同的id（id现在是a1，a2，...）

Answer 4

我就是这样做的。

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

Answer 5

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

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

Answer 6

尝试 -

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  );
}

希望它有效：）

Answer 7

也许这会对某人有所帮助！

使用 Vanilla JS 在动态生成的 div 中添加图像 -

如果要向 div 添加图像，可以使用 backgroundImage 属性，也可以在 div 中添加 img 标签。

使用 backgroundImage 属性：

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);
}

使用图像标签：

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);
    }

我更喜欢使用第二种方法，因为您可以更好地控制样式。

干杯！

Answer 8

我相信你错误地指的是div。

尝试$("div#a1").html....

这称为选择器。将有助于阅读它们。

如何在动态创建的div中添加图像？

8 个答案: