Add two elements at a time, one inside the other, to an element
<p>I have a proxy application retrieving 'src' attributes cross domain from an xml list of photos.</p>

<p>I want to append images full size INSIDE of presized div's so they render in a uniform size, without stretching.</p>

<p>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.</p>

<p>tl;dr;
Right now I have this</p>

<pre><code>$("&lt;img&gt;").attr("src", stuff).attr('class','imgur').appendTo("#content");
</code></pre>

<p>Producing this:</p>

<pre><code>&lt;div id="content"&gt;
  &lt;img /&gt;
  &lt;img /&gt;
  &lt;img /&gt;
  &lt;img /&gt;
&lt;/div&gt;
</code></pre>

<p>And I want this:</p>

<pre><code>&lt;div id="content"&gt;
  &lt;div class="window"&gt;&lt;img /&gt;&lt;/div&gt;
  &lt;div class="window"&gt;&lt;img /&gt;&lt;/div&gt;
  &lt;div class="window"&gt;&lt;img /&gt;&lt;/div&gt;
  &lt;div class="window"&gt;&lt;img /&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><em><strong>Answer slightly modified to meet my use case:</em></strong></p>

<pre><code>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);
  }
</code></pre>

<p>Being fired by:</p>

<pre><code>HtmlPage.Window.Invoke("imgAdd", p.src);
System.Threading.Thread.Sleep(20);
</code></pre>
