title: How to add content to a bootstrap panel by using jQuery?
body: <p>After retrieving info, I want to show it inside a bootstrap panel by using jQuery.</p>
  
  <p>I use the <code>.html()</code> function to show the panel.</p>
  
  <pre><code>$('#id_div').html('&lt;div class="panel panel-info"&gt;&lt;div class="panel-heading"&gt;&lt;h3 class="panel-title"&gt;'+my.awesome.title+'&lt;/h3&gt;&lt;/div&gt;&lt;div class="panel-body"&gt;Content here :) There is more and this is becoming a super long line ...&lt;/div&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>I have found that there is a way to break this into several lines by using <code>.append()</code> . I have tried the following:</p>
  
  <pre><code>$('#id_div').append('&lt;div class="panel-body"&gt;Adding more content here :) &lt;/div&gt;');
  </code></pre>
  
  <p>This does not work, since the added text appears outside the panel.</p>
  
  <p>How do I specify where exactly I want the code to be appended?</p>
  
  <p><strong>Solved.</strong></p>
  
  <p>According to David, by using the <code>.find()</code> function, you can specify where exactly you want the text to be appended.</p>
  
  <p><code>$('#id_div').find('.panel-body').append('Adding more content here :)');</code></p>