2

我正在使用以下代码在我的 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);
    }

我该怎么做？请帮忙。

4

8 回答 8

4

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

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

于 2016-05-03T11:49:36.930 回答
2 
var div = $('<div id="a1"></div>');
div.html("<font color=green>This is demo</font>");
div.prepend('<img src="...">');
于 2013-10-07T10:29:01.510 回答
0

尝试 -

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

希望它有效:)

于 2013-10-07T13:39:45.987 回答
0 
var div = $('<div id="a1"></div>').html("<img src='iphone.png' /><font color=green>This is demo</font>");

$('#test').append(div);
于 2013-10-07T10:35:53.393 回答
0

（为编辑问题而编辑）

您可以简单地将其添加到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、...）

于 2013-10-07T10:29:21.400 回答
0

我就是这样做的。

var div = $('<div/>',{id:"a1"});
$("<font/>",{color:"green"}).html("This is demo").appendTo(div);
div.prepend('<img/>',{src:"test.jpg"});
于 2013-10-07T10:33:41.930 回答
0

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

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

我更喜欢使用第二种方法，因为您将对样式有很大的控制权。

干杯!

于 2021-01-01T12:56:14.283 回答
-1

我相信你指的是 div 不正确。

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

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

于 2013-10-07T10:30:34.903 回答