jQuery append is not rendering html - it is displaying as text

Question

I am using jQuery to move spans that are under the product-price and product-color classes and appending to the product-title class contents (in parentheses and comma separated with another span), however it is displaying as text instead of html. Can someone tell me how to avoid this and maybe if I am doing this the wrong way? Thanks!

<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>

What are expected results? Running the snippet here in the page doesn't show any extra quotes — charlietfl
– charlietfl, Commented Sep 1, 2020 at 22:35
I clarified the problem and updated the code. A new span that I am trying to append is being appended with quotes around it. You can see it in the 2nd product. I am new to jQuery and am not sure if I am doing it correctly. I want the span to be html and not displayed as is. — user5983219
– user5983219, Commented Sep 1, 2020 at 23:25

Pedro Silveira · Accepted Answer · 2020-09-01 23:55:02Z

1

Inside your while loop, iterate using .eq jQuery method, like this:

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, '\)');
}

Sorry for messing up with the white spaces. Please give me a +rep if it helps ;)

answered Sep 1, 2020 at 23:55

Pedro Silveira

3423 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5983219 Over a year ago

THANK YOU. I modified it a bit. I need to read up on what .eq() does. Is there a better way for me to do this function? Thanks again!

Collectives™ on Stack Overflow

jQuery append is not rendering html - it is displaying as text

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related