Question

我正在创建像var liContent = document.createTextNode(someHtmlString);这样的Text node。然后将此变量添加到$("<li/>").html(liContent).appendTo(targetUnorderList);

之类的列表中

问题是：我可以在liContent项目中突出显示某些文字吗？如果“是” - 我怎么能这样做？ 澄清：我需要在li中突出显示部分内容。例如，单词Nice。

更新同时，我需要像文本一样显示Text节点的所有内容（包括html标签）。

更新2：不允许对需要显示的字符串进行处理。似乎没有解决方案，因为浏览器将Text节点解释为纯文本。

整个代码示例（工作）：

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

试试这个，它会显示＆＃34;突出显示的文字＆＃34;红色

＆＃13;

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];

＆＃13;

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

＆＃13;

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>

Text节点的一部分可以突出显示吗？

2 个答案: