一次添加两个元素,一个在另一个内部,添加到元素

时间:2011-11-09 18:59:28

标签: javascript jquery

我有一个代理应用程序从xml的照片列表中检索'src'属性跨域。

我想在预设div的内部附加图像全尺寸,以便它们以均匀的尺寸渲染,而不会拉伸。

我知道如何自己附加图像,但我不知道如何创建一个div,将图像附加到该元素,然后将img的div添加到容器中。

TL;博士; 现在我有这个

$("<img>").attr("src", stuff).attr('class','imgur').appendTo("#content");

制作:

<div id="content">
  <img />
  <img />
  <img />
  <img />
</div>

我想要这个:

<div id="content">
  <div class="window"><img /></div>
  <div class="window"><img /></div>
  <div class="window"><img /></div>
  <div class="window"><img /></div>
</div>

稍加修改以符合我的使用案例的答案:

function imgAdd(param) {
    var content = document.getElementById("content");
    var img = new Image();
    img.src = param;
    img.classList.add("imgur");
    var div = document.createElement("div");
    div.classList.add("window");
    div.appendChild(img);
    content.appendChild(div);
  }

被解雇:

HtmlPage.Window.Invoke("imgAdd", p.src);
System.Threading.Thread.Sleep(20);

3 个答案:

答案 0 :(得分:3)

尝试以下

var theDiv = $('<div></div>');
$('<img>').attr('src', stuff).attr('class', 'imgur').appendTo(theDiv);
theDiv.appendTo('#content');

答案 1 :(得分:1)

var content = document.getElementById("content");
for (var i = 0; i < len; i++) {
  var img = new Image();
  img.src = data[i].stuff;
  img.classList.add("imgur");
  var div = document.createElement("div");
  div.classList.add("window");
  div.appendChild(img);
  content.appendChild(div);
}

可能需要classList shimDOM shim来支持旧版平台。

如果您不想要classList填充程序,则可以直接操作.className

.className = "string".className += " string"

答案 2 :(得分:1)

$('#content').append('<div class="window"><img /></div>');

但如果您只需要图像尺寸统一,那么CSS就是您的选择。