如何使用JQuery和来自JavaScript对象的src和id创建新的img标签？

87

我从基本的意义上理解JQuery，但绝对是它的新手，并且怀疑这很简单。

我已经在JSON响应（转换为对象）中获得了图像src和id，因此在responseObject.imgurl和responseObject.imgid中具有正确的值，现在我想用它创建图像并将其附加到一个div（让我们称之为它<div id="imagediv">。我在动态构建方面有些滞后<img src="dynamic" id="dynamic">-我看到的大多数示例都涉及在现有图像上替换src，但我没有现有图像。

javascript jquery image

— 彼得
source

138

在jQuery中，可以通过将HTML字符串传递给构造函数来创建一个新元素，如下所示：

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');

— 罗伯·W
source

@ a7omiton通过contextmenu或通过检查器查看源代码？上下文菜单（或Ctrl + U）显示从服务器接收的数据，而不用JavaScript进行更改。使用DOM检查器查看包含实时更改的文档的活动HTML。

— 罗伯W

抱歉，我删除了注释：/，它确实出现在开发工具中，由于jquery map 404问题

— a7omiton

您说对了，但图片没有显示在源页面上（ctrl + u）

— a7omiton 2013年

@ a7omiton您可以通过单击右下角的齿轮图标并禁用“启用源地图”选项来禁用有关jquery.min.map的404警告。

— 罗布W

是的，我只是通过paul_irish（stackoverflow.com/questions/18365315/…）查看解决方案。谢谢:)

— a7omiton

85

var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));

— 法国洛杉矶
source

17

您可以.attr通过将属性传递给jQuery构造函数来避免完全节省一些字节：

var img = $('<img />',
             { id: 'Myid',
               src: 'MySrc.gif', 
               width: 300
             })
              .appendTo($('#YourDiv'));

— 埃里克·贝斯特
source

2

对于那些需要IE 8中相同功能的人，这就是我解决问题的方式：

  var myImage = $('<img/>');

               myImage.attr('width', 300);
               myImage.attr('height', 300);
               myImage.attr('class', "groupMediaPhoto");
               myImage.attr('src', photoUrl);

我不能强迫IE8在构造函数中使用对象。

— 韦克索尼
source