title: Selective Rendering of Plain HTML Tag
body: <p>Please consider the code below.</p>
  
  <p>Here are what I need to happen:</p>
  
  <p>1.) The html tag from variable <code>msg_raw</code> will be rendered as plain html.</p>
  
  <p>2.) The html tag from variable <code>message</code> will be applied, which would mean that the output display will have a red colored <code>ABC</code> text and blue colored <code>&lt;b&gt;DEF&lt;/b&gt;</code> text, like so:</p>
  
  <pre><code>ABC           &lt;-- red colored text
  &lt;b&gt;DEF&lt;/b&gt;    &lt;-- blue colored text
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var msg_raw = '&lt;b&gt;DEF&lt;/b&gt;';
  var message = '&lt;div class="red_text"&gt;ABC&lt;/div&gt;';
  message += '&lt;div class="blue_text"&gt;' + msg_raw + '&lt;/div&gt;';
  
  $('#some_ID').html(message);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.red_text{ color: red; }
  .blue_text{ color: blue; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="some_ID"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>