title: Javascript way to create multiple HTML containers?
body: <p>I've been following this tutorial: <a href="http://mariechatfield.com/tutorials/firebase/step5.html" rel="nofollow noreferrer">http://mariechatfield.com/tutorials/firebase/step5.html</a></p>
  
  <p>But I wanted to spice it up and instead of printing the last database object, I want to print all of them.</p>
  
  <p>I've tried printing off the database, which works fine. I just need to edit the Html. I tried using a line break, but nothing either. It keeps appending to the starting string instead of making a new line/container.</p>
  
  <pre><code>recommendations.limitToLast(10).on('child_added',     function(childSnapshot) {
    // Get the recommendation data from the most recent snapshot of data
    // added to the recommendations list in Firebase
   recommendation = childSnapshot.val();
    console.log(recommendation);
  
    // Update the HTML to display the recommendation text
    $("#title").append(recommendation.title)
  
    $("#presenter").append(recommendation.presenter)
    $("#link").append(recommendation.link)
    var x = '\n';
    x;
  
    // Make the link actually work and direct to the URL provided
    $("#link").attr("href", recommendation.link)
  });
  </code></pre>
  
  <p>I hope to be able to have an individual container for each database element.</p>