テキストノードの一部をハイライト表示できますか？

Question

Text nodeをvar liContent = document.createTextNode(someHtmlString);のように作成しています。 そして$("<li/>").html(liContent).appendTo(targetUnorderList);

質問のようにリストにこの変数を追加するには、次のとおりです。私はliContent項目にテキストをハイライト表示することはできますか？ "はい"の場合 - どうすればいいですか？ 明確化：liの部分内容を強調表示する必要があります。たとえば、Niceという単語です。

アップデート：私はちょうど（htmlタグを含む）のテキストのようなテキスト・ノードのすべてのコンテンツを表示する必要がある。同時に 。

更新2：表示する必要がある文字列には処理が許可されていません。テキストノードはプレーンテキストのようにブラウザによって解釈されるので、解決策はないと思われます。

全体のコード例（作業）：

var someHtmlString = "<i class='icon-window-add'>Nice text here</i>"; 
 
var targetUnorderList = $("#targetUnorderList"); 
 
var liContent = document.createTextNode(someHtmlString); 
 
$("<li/>").html(liContent).appendTo(targetUnorderList)[0];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="targetUnorderList"></ul> 
 
</div>

Answer 1

はこれをしようと、それは赤色で "テキストを強調表示" が表示されます

var someHtmlString1 = "<i class='icon-window-add'>Nice "; 
 
var someHtmlString2="Highlighted text</span>"; 
 
var someHtmlString3="here</i>"; 
 
var targetUnorderList = $("#targetUnorderList"); 
 
var span1Text=document.createTextNode(someHtmlString1); 
 
var span3Text=document.createTextNode(someHtmlString3); 
 
var li=$("<li/>"); 
 
var span1=$("<span/>").html(span1Text).appendTo(li); 
 
var span2=$("<span style='color:red'/>").html(someHtmlString2).appendTo(span1); 
 
var span3=$("<span/>").html(span3Text).appendTo(li); 
 

 
    
 

 
    li.appendTo(targetUnorderList)[0];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="targetUnorderList"></ul> 
 
</div>

Answer 2

はいあなたはちょうどあなたがこのクラスでスパンで強調表示したいテキストを折り返す、カスタムクラスhighlightを作成することができ、あなたはjQueryのを使用しているので、それを行うことができるだけで好き：

$("<li/>").html("<i class='icon-window-add'>Nice <span class='highlight'>text here</span></i>"); 

・ホープ、このことができます。あなたは_highlight_によって何を意味

var li = $("<li/>").html("&lt;i class='icon-window-add'&gt;Nice <span class='highlight'>text here</span>&lt;/i&gt;"); 
 

 
$("#targetUnorderList").append(li);

.highlight { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="targetUnorderList"></ul> 
 
</div>