title: Append "i" tag plus text to span
body: <p>I have this angular script to build out a div. the problem i'm having is that it appends the .text inside the i tag and not as a sibling of i.</p>
  
  <p>Hope this makes sense.</p>
  
  <pre><code>            var body = placeWrapper
                  .append('div')
                  .attr('class', 'thm-listing__body');
  
                  body.append('span')
                  .attr('class', 'thm-listing__location')
                  .append('i')
                  .attr('class', 'fa fa-map-marker')
                  .text(function (d) {
                      return d.Address;
                  });
  </code></pre>
  
  <p>this dive is suppose to render out as follows:</p>
  
  <pre><code>&lt;div class="thm-listing__body"&gt;
  &lt;span class="thm-listing__location"&gt;
  &lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;
  The text here
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it currently renders out:</p>
  
  <pre><code>&lt;div class="thm-listing__body"&gt;
  &lt;span class="thm-listing__location"&gt;
  &lt;i class="fa fa-map-marker"&gt;The text here&lt;/i&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>