title: Jquery - display data in html tag
body: <p>[SOLVED] <br>
  How to display data in html tag from Jquery code?</p>
  
  <p>I loop through the json response from server and need to write these elements to some tag in html. </p>
  
  <p><strong>What I have:</strong> I receive response from server well. Looping through it also OK. <br> 
  <strong>The problem:</strong> The elements are actually appended, which I can see because the page size is increased immensely after completing my Jquery function. <strong>BUT</strong> with having the size of page increased I don't see any text on it I expect to.
  I suppose it's because the parent element of the tag I'm appending to is given <em>(display:none)</em> by default. But I actually initiate its appearing by <em>$("#allowed").show();</em>. 
  Still it's not working. </p>
  
  <p>I would appreciate any help immensely. Thanks in advance! </p>
  
  <p><strong><em>My html extract:</em></strong></p>
  
  <pre><code>   &lt;section id="allowed" style="display:none;"&gt;
          &lt;div id="map_canvas"&gt;&lt;/div&gt;
          &lt;div id="nearest_banks"&gt;
              &lt;form action="/nearest_banks/" method="get" id="send_radius"&gt;
                Курс ближайших банков на сегодня в радиусе
                &lt;input type="text" name="radius" id="radius" size="5" value={{radius}} &gt;
                &lt;input type="submit" class="button" value="V"&gt;
                 метров
              &lt;/form&gt;
              &lt;div id="places"&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p><strong><em>My Javascript extract:</em></strong> </p>
  
  <pre><code>$("#yes").click(function() {
          $("#ask_user").hide();
          $.ajax({
              type: "post",
              url: '/nearest_banks/radius',
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (data) {
                  $("#allowed").show();
                  var str = "";
                  $("#places").empty();
                  $.each(data.places, function(index, element) {
                      str += '&lt;p&gt;' + '&lt;span class="name"&gt;' + element.name + '&lt;/span&gt;' +
                              '&lt;span class="location"&gt;' + element.location + '&lt;/span&gt;' +
                              '&lt;/p&gt;'
                  });
                  $('#places').append(str);
              }});
      });
  </code></pre>
  
  <p><strong>EDIT:</strong>
  I found the solution. The main problem was indeed in css. Still some answers were up to the point concerning the performance improvement and correct syntax, so I edited the code according to them. 
  Thus the code above is edited and is working fast enough. Hope this question will help someone someday. </p>