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

Question

嗨，我正在尝试在我的栏上出现的每个文本之后包含一个图像，这是我无法弄清楚的 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(), current = $('#goal-current').html();
  $('#total-bar').css('width', current / total * 100 + '%').css('width', '-=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,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>

标签： javascripthtmlcssprogress-bartwitch