Append "i" -Tag plus Text zu überspannen

Question

Ich habe dieses angulare Skript, um ein div. Aufzubauen. Das Problem, das ich habe, ist, dass es den .text innerhalb des i Etiketts anhängt und nicht als ein Geschwister von i.

Hope das macht Sinn.

  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; 
       }); 

wird dieser Tauchgang wie folgt zu rendern annehmen:

<div class="thm-listing__body"> 
<span class="thm-listing__location"> 
<i class="fa fa-map-marker"></i> 
The text here 
</span> 
</div> 

Aber es macht derzeit aus:

<div class="thm-listing__body"> 
<span class="thm-listing__location"> 
<i class="fa fa-map-marker">The text here</i> 
</span> 
</div> 

Answer 1

Du text-i Tag einstellen und Sie möchten einen Text für spanne rechts, also setze den Text direkt nach dem append span statt nach dem append i wie unten

var body = placeWrapper 
     .append('div') 
     .attr('class', 'thm-listing__body'); 

     body.append('span') 
     .attr('class', 'thm-listing__location') 
     .text(function (d) { 
      return d.Address; 
     }) 
     .append('i') 
     .attr('class', 'fa fa-map-marker'); 

aktualisiert

Set-Symbol vor der Spanne Text Verwendung prepend() nach unten

var body = placeWrapper 
      .append('div') 
      .attr('class', 'thm-listing__body'); 

      body.append('span') 
      .attr('class', 'thm-listing__location') 
      .text(function (d) { 
       return d.Address; 
      }) 
      .prepend('i') 
      .attr('class', 'fa fa-map-marker');