jQuery 追加不呈现 html - 它显示为文本答案

【问题标题】：jQuery append is not rendering html - it is displaying as textjQuery 追加不呈现 html - 它显示为文本
【发布时间】：2020-09-02 07:55:02
【问题描述】：

我正在使用 jQuery 移动位于 product-price 和 product-color 类下的 span 并附加到 product-title 类内容（在括号和逗号中，用另一个 span 分隔），但是它显示为文本而不是html。有人可以告诉我如何避免这种情况，也许我做错了？谢谢！

<html>
<head>
  <title>Playground</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
  <div id="catalog-courses" class="course-listing">
    <a href="#" title="Title1" class="container">
      <div class="imgwrap">
        <div class="ribbon">
          <span class="ribbon-text">Sold Out</span>
        </div>
      </div>
      <div class="product-image">
        <img src="https://picsum.photos/100" alt="Product 1" />
      </div>
      <div class="product-title">Product 1</div>
      <div class="product-description">This is all about product 1</div>
      <div class="product-price">
        <span></span>
      </div>
      <div class="product-color product-callout">
        <span>Blue</span>
      </div>
      <div class="product-tags">
        <span class="product-tag" >
          <span>Tag 1</span>
        </span> 
        <span class="product-tag" >
          <span>Tag 2</span>
        </span> 
        <span class="product-tag" >
          <span>Tag 3</span>
        </span> 
      </div>
      <br/><br/><br/>
    </a> 
    <a href="#" title="Title2" class="container">
      <div class="imgwrap">
        <div class="ribbon">
          <span class="ribbon-text">Available</span>
        </div>
      </div>
      <div class="product-image">
        <img src="https://picsum.photos/100" alt="Product 2" />
      </div>
      <div class="product-title">Product 2</div>
      <div class="product-description">This is all about product 2</div>
      <div class="product-price">
        <span>$10</span>
      </div>
      <div class="product-color product-callout">
        <span>Orange</span>
      </div>
      <div class="product-tags">
        <span class="product-tag" >
          <span>Tag 1</span>
        </span> 
        <span class="product-tag" >
          <span>Tag 2</span>
        </span> 
        <span class="product-tag" >
          <span>Tag 5</span>
        </span> 
      </div>
    </a>
  </div>
  <br/><br/><br/>
  <script>
    $(document).ready(function()
    {

      var i = 0;

      while( i < $('.product-title').length)
      {

        var value1 = $(".product-price span")[0];
        var value2 = $(".product-color span")[0];

        if (value1.innerHTML !='' && value2.innerHTML !='')
        {
          $(this).find('.product-title')[i].append(' \(', '<span class=\"test\">', value1, '\,', value2, '</span>', '\)');
        }
        else if (value1.innerHTML !='') 
        {
          $(this).find('.product-title')[i].append(' \(', value1,value2,'\)');
        }  
        else if (value2.innerHTML !='')
        {
          $(this).find('.product-title')[i].append(' \(', value2,value1,'\)');
        }  
        i++;

      }   
    });
  </script>

</body>
</html>

【问题讨论】：

预期结果是什么？在页面这里运行 sn-p 不会显示任何额外的引号
我澄清了问题并更新了代码。我试图附加的一个新跨度被附加了引号。您可以在第二个产品中看到它。我是 jQuery 新手，不确定我是否做得正确。我希望跨度为 html 而不是按原样显示。

标签： html jquery css

【解决方案1】：

在您的 while 循环中，使用 .eq jQuery 方法进行迭代，如下所示：

if (value1.innerHTML != '' && value2.innerHTML != '') {
  $('.product-title').eq(i).append('<span class=\"test\">', value1, value2, '</span>');
}
else if (value1.innerHTML != '') {
  $('.product-title').eq(i).append(' \(', value1, value2, '\)');
}
else if (value2.innerHTML != '') {
  $('.product-title').eq(i).append(' \(', value2, value1, '\)');
}

很抱歉弄乱了空格。如果有帮助，请给我一个 +rep ;)

【讨论】：

谢谢。我稍微修改了一下。我需要阅读 .eq() 的作用。我有更好的方法来执行此功能吗？再次感谢！