Question

I have a proxy application retrieving ‘src’ attributes cross domain from an xml list of photos.

I want to append images full size INSIDE of presized div’s so they render in a uniform size, without stretching.

I know how to append the images on their own, but I don’t know how to create a div, append the image to that element, then appendTo that div with the img to a container.

tl;dr;
Right now I have this

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

Producing this:

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

And I want this:

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

Answer slightly modified to meet my use case:

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

Being fired by:

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

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

May require a classList shim or a DOM shim for legacy platform support.

If you don’t want a classList shim you can manipulate .className directly.

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