如何使用js在每个文本后添加图像？

如何解决如何使用js在每个文本后添加图像？

嗨，我正在尝试在我的栏上出现的每个文本之后包含一个图像，这是我无法弄清楚的 js 的问题，感谢您的帮助，（“//不同的尝试”）是图像应该放在的位置！

这是一个抽搐填充栏，它有效，但我想在每个文本后包含心脏。

document.addEventListener('goalLoad',function (obj) {
  /*what i tried here 
  var img = new Image();   // Create new img element
  img.src = 'https://icon-library.com/images/twich-icon/twich-icon-2.jpg'; // Set source path
  what i tried here */

  $('#title').html(obj.detail.titel);
  $('#goal-total').text(obj.detail.amount.target);
  $('#goal-end-date').text(obj.detail.to_go.ends_at);
  $('#goal-current').text(obj.detail.amount.current);
  var total = $('#goal-total').html(),current = $('#goal-current').html();
  $('#total-bar').css('width',current / total * 100 + '%').css('width','-=8px');
  $('#goal-total').text(obj.detail.amount.target) + $('#goal-total').img.src; // different tries
  $('#title').text(obj.detail.titel1) + img.src; // different tries
  $('#goal-current').text(obj.detail.amount.current) + img.src; // different tries
});

document.addEventListener('goalEvent',function (obj) {
  $('#goal-total').text(obj.detail.amount.target);
  $('#goal-current').text(obj.detail.amount.current);
  var total = $('#goal-total').html(),'-=8px');
  $('#goal-total').text(obj.detail.amount.target + ''); // different tries
  $('#title').text(obj.detail.titel1) + img.src; // different tries
  $('#goal-current').text(obj.detail.amount.current + '');
}); // different tries

/* All html objects will be wrapped in the #wrap div */ 
.goal-cont { margin: 10px; color: white; } 
#title { font-size: 28px; text-transform: uppercase; font-weight: bold; font-family: Roboto,sans-serif; text-align: center; text-shadow: 0px 0px 10px #000; margin: 0; width: 70%; z-index: 1; } 
#goal-current,#goal-total { margin: 1; font-family: Roboto,sans-serif; font-weight: bold; font-size: 25px; text-shadow: 0px 0px 10px #000; width: 15%; z-index: 1; } 
#goal-total { text-align: right; } 
#goal-bar { border: 1px solid transparent; background:linear-gradient(90deg,rgba(0,5,255,1) 0%,rgba(255,10,1) 100%),linear-gradient(to bottom right,#b827fc 0%,#2c90fc 25%,#b8fd33 50%,#fec837 75%,#fd1892 100%) center center / 120% 120% ; background-clip:content-box,border-box; padding: 7px; display: flex; overflow: hidden; border-radius: 100px; } 
#total-bar { position: absolute; width: calc(100% - 8px); height: calc(100% - 8px); max-width: 100%; background: url('https://i.ytimg.com/vi/vdB-8eLEW8g/hqdefault.jpg'); background-size: contain; top: 4px; left: 4px; overflow: hidden; border-radius: 100px; } 
#line{ position: absolute; top: 4px; left: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation-name: animate; animation-duration: 4s; animation-iteration-count: infinite; border-radius: 100px; }
@keyframes animate { 0%   {background-color:red; opacity: 0.2;} 25%  {background-color:yellow; opacity: 0.2;} 50%  {background-color:blue; opacity: 0.2;} 75%  {background-color:green; opacity: 0.2;} 100%  {background-color:red; opacity: 0.2;} }
#img,#img1,#img2{ width:20px; height:20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='goal-cont'> 
  <div style='position: relative'> 
    <div id='goal-bar'> 
      <p id='goal-current'>0</p>
      <p id='title'>More</p>
      <p id='goal-total'>20</p>
      <div id='total-bar'><p id ='img'></p> 
      <div id='line'>
      </div> 
    </div> 
  </div> 
</div>