title: Can part of Text node be highlighted?
body: <p>I am creating <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode" rel="nofollow noreferrer">Text node</a> like <code>var liContent = document.createTextNode(someHtmlString);</code>.
  And then add this variable into list like <code>$("&lt;li/&gt;").html(liContent).appendTo(targetUnorderList);</code></p>
  
  <p><strong>Question is:</strong> Can I highlight some text in the <code>liContent</code> item?
  And if "Yes" - how can I do that?
  <em>Clarification:</em> I need to highlight partial content within <code>li</code>. For example, word <code>Nice</code>. </p>
  
  <p><strong>Update:</strong>
  At the same time I need to display all content of Text node just like a text (including <code>html</code> tags).</p>
  
  <p><strong>Update 2:</strong> No processing is allowed on the string which need to be displayed. Seems there are no solution, because Text node is interpreted by browser just like a plain text.</p>
  
  <p>Whole code example (working):</p>
  
  <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 someHtmlString = "&lt;i class='icon-window-add'&gt;Nice text here&lt;/i&gt;";
  var targetUnorderList = $("#targetUnorderList");
  var liContent = document.createTextNode(someHtmlString);
  $("&lt;li/&gt;").html(liContent).appendTo(targetUnorderList)[0];</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;ul id="targetUnorderList"&gt;&lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>