Question

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.

Here’s what I’m trying to end up with:

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

Here’s one of the many things I’ve tried (chdata is the object, chvalue will hold the data):

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

..but of course that results in this:

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

I’ve also tried using:

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

..but same result. How can I achieve this?

Answer 1

You could use .appendTo method.

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