Using jQuery to append a div, then append more items into the new div without ID's
<p>I need to use jQuery to append a div with the class 'address-line' to another element with id 'add-results', and then add several elements to the newly created div. Then repeat this for each item of an object.</p>

<p>Here's what I'm trying to end up with:</p>

<pre><code>&lt;div id="add-results"&gt;    
  &lt;div class="address-line"&gt;
    &lt;h2&gt;title 1&lt;/h2&gt;
    &lt;p&gt;desc 1&lt;/p&gt;
    &lt;img src="thing1.png" /&gt;
  &lt;/div&gt;
  &lt;div class="address-line"&gt;
    &lt;h2&gt;title 2&lt;/h2&gt;
    &lt;p&gt;desc 2&lt;/p&gt;
    &lt;img src="thing2.png" /&gt;
  &lt;/div&gt;
  &lt;!-- etc repeated on a loop --&gt;
&lt;/div&gt;
</code></pre>

<p>Here's one of the many things I've tried (chdata is the object, chvalue will hold the data):</p>

<pre><code>$.each(chdata, function(name, chvalue) {
  $('#add-results').append('&lt;div class="address-line"&gt;');
  $('#add-results').append('&lt;h2&gt;'+chvalue['title']+'&lt;/h2&gt;');
  // etc.. adding paragraph, an image, some links.
});
</code></pre>

<p>..but of course that results in this:</p>

<pre><code>&lt;div id="add-results"&gt;
  &lt;div class="address-line"&gt;&lt;/div&gt;
  &lt;h2&gt;title 1&lt;/h2&gt;
  &lt;p&gt;desc 1&lt;/p&gt;
  &lt;img src="thing1.png" /&gt;
  &lt;div class="address-line"&gt;&lt;/div&gt;
  &lt;h2&gt;title 2&lt;/h2&gt;
  &lt;p&gt;desc 2&lt;/p&gt;
  &lt;img src="thing2.png" /&gt;
&lt;/div&gt;
</code></pre>

<p>I've also tried using:</p>

<pre><code>$('#add-results').append('&lt;div class="address-line"&gt;')
.append('&lt;h2&gt;'+chvalue['title']+'&lt;/h2&gt;');
</code></pre>

<p>..but same result. How can I achieve this?</p>
