Text節點的部分是否可以突出顯示？

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>"); 

希望這有助於。

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>