一次向一个元素添加两个元素，一个在另一个内部

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

我想在预大小div的内部添加全尺寸的图像，这样它们就可以在不拉伸的情况下以统一的大小渲染。

我知道如何单独附加图像，但我不知道如何创建div，将图像附加到该元素，然后用img将其附加到容器中。

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

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

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

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