如何使用 JQuery 创建一个新的 img 标签，其中包含来自 JavaScript 对象的 src 和 id？

Posted 2023-03-07

【中文标题】如何使用 JQuery 创建一个新的 img 标签，其中包含来自 JavaScript 对象的 src 和 id？

【英文标题】：How to create a new img tag with JQuery, with the src and id from a JavaScript object?

【发布时间】：2011-12-22 06:19:07

【问题描述】：

我对 JQuery 有基本的了解，但绝对是新手，我怀疑这很容易。

我的图像 src 和 id 在 JSON 响应中（转换为对象），因此 responseObject.imgurl 和 responseObject.imgid 中有正确的值，现在我想用它创建一个图像将它附加到一个 div （让我们称之为<div id="imagediv">。我有点坚持动态构建<img src="dynamic" id="dynamic"> - 我见过的大多数示例都涉及替换现有图像上的 src，但我没有现有图像。

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案3】：

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

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

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

我无法强制 IE8 在构造函数中使用对象。

【参考方案4】：

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

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

【讨论】：

@a7omiton 通过上下文菜单或检查器查看源代码？上下文菜单（或 Ctrl + U）显示从服务器接收到的数据，没有 javascript 所做的更改。使用 DOM 检查器查看文档的活动 HTML 以及实时更改。

抱歉，我删除了评论：/，它现在确实显示在开发工具中，由于 jquery map 404 问题，页面被挂起

你是对的，但是图片没有显示在源页面上（ctrl + u）

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

是的，我只是在看 paul_irish (***.com/questions/18365315/…) 的解决方案。谢谢你:)