title: Replace HTML nodes with Cheerio
body: <p>I'm using <a href="https://www.google.fi/search?q=cheerio%20js&amp;oq=cheerio%20js&amp;aqs=chrome..69i57j0l5.1613j0j7&amp;sourceid=chrome&amp;ie=UTF-8" rel="nofollow noreferrer">Cheerio JS</a> to simplify some ancient HTML code and transform it into HTML5. Among other things, I'm replacing some markup-heavy quotes that look like the following:</p>
  
  <p>Node to be replaced:</p>
  
  <pre><code>&lt;div style="margin:20px; margin-top:5px; "&gt;
      &lt;div class="smallfont" style="margin-bottom:2px"&gt;Quote:&lt;/div&gt;
      &lt;table cellpadding="6" cellspacing="0" border="0" width="100%"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td class="alt2" style="border:1px solid #999"&gt;
                      &lt;div&gt;
                          Originally Posted by &lt;strong&gt;Username&lt;/strong&gt;
                      &lt;/div&gt;
                      &lt;div style="font-style:italic"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The transformed output is supposed to look like this:</p>
  
  <pre><code>&lt;blockquote&gt;Lorem ipsum dolor sit amet&lt;/blockquote&gt;
  </code></pre>
  
  <p>Here's the code current code I'm using at this time:</p>
  
  <pre><code>$(`table[id^='post']`).each( (i, el) =&gt; {
      // Get the post
      let postBody = $(el).find(`div[id^='post_message_']`).html().trim();
  
      // Replace quotes with blockquotes
      cheerio.load(postBody)('div[style^="margin:20px; margin-top:5px; "]').each( (i, el) =&gt; {
          if ($(el).html().trim().startsWith('&lt;div class="smallfont" style="margin-bottom:2px"&gt;Quote')) {
              let tbody = $(el).find('tbody &gt; tr &gt; td').html();
              let quote = $(el).find('tbody &gt; tr &gt; td &gt; div');
  
              if (quote.html() &amp;&amp; quote.text().trim().startsWith('Originally Posted by')) {
                  let replacement = $('&lt;blockquote&gt;Hello&lt;/blockquote&gt;');
                  quote.parent().html().replace(quote.html(), replacement);
              }
  
              // Looks all good
              console.log($(el).html())
          }
  
          postBody = $(el).html();
      });
  });
  </code></pre>
  
  <p>And lastly, more HTML for some context:</p>
  
  <pre><code>&lt;div id="post_message_123456"&gt;
      As Username has previously written
      &lt;br&gt;
      &lt;div style="margin:20px; margin-top:5px; "&gt;
          &lt;div class="smallfont" style="margin-bottom:2px"&gt;Quote:&lt;/div&gt;
          &lt;table cellpadding="6" cellspacing="0" border="0" width="100%"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td class="alt2" style="border:1px solid #999"&gt;
  
                          &lt;div&gt;
                              Originally Posted by &lt;strong&gt;Username&lt;/strong&gt;
                          &lt;/div&gt;
                          &lt;div style="font-style:italic"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;br&gt;
      I think he has a point!
      &lt;img src="smile-with-sunglasses.gif" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The replacement itself seems to work, the output of the <code>console.log()</code> statement looks all good. The problem lies in the last line, where I'm trying to replace the original content with the replacement. However, <code>postBody</code> looks like it did before. What am I doing wrong?</p>