Javascript 在dom元素中插入span而不覆盖子节点？

我有一篇带有一些注释的HTML文章，这些注释是我通过SPARQL查询检索到的。这些注释引用了文档中的一些文本，我必须突出显示这些文本（将其包装成一个span）

我已经问过如何在一个范围内包装文本，但现在我有一个更具体的问题，我不知道如何解决。 我写的代码是：

var currentText = $("#"+v[4]["element"]+"").text();
var newText = currentText.substring(0, v[5]["start"]) + "<span class=' annotation' >" + currentText.substring(v[5]["start"], v[6]["end"]) + "</span>" + currentText.substring(v[6]["end"], currentText.length);
$("#"+v[4]["element"]+"").html(newText);

它变成：

<p class="metadata-entry" id="k673f4141ea127b">
    Publication date (collection): 
    <span class="annotation">2003</span>
</p>

---

您可以使用

$（el）.append（）

或

$（el）.prepend（）

插入

标记，而不是执行所有这些操作

$("#k673f4141ea127b").append('<span class="annotation">2003</span>');

小提琴：

$（文档）.ready（函数（）{
$（“k673f4141ea127b”）.contents（）.eq（1）.wrap（“”）；
});


出版日期（集）：
2003
您可以使用
$（el）.append（）
或
$（el）.prepend（）
插入
标记，而不是执行所有这些操作

$("#k673f4141ea127b").append('<span class="annotation">2003</span>');

小提琴：

$（文档）.ready（函数（）{
$（“k673f4141ea127b”）.contents（）.eq（1）.wrap（“”）；
});


出版日期（集）：
2003
最后，我的解决方案被束之高阁

概括：

        var element = document.getElementById(id);
        var totalText = element.textContent;
        var toFindText = totalText.substring(start,end);
        var toReplaceText = "<span class='annotation'>"+toFindText+"</span>";
        element.innerHTML = element.innerHTML.replace(toFindText, toReplaceText);

var-element=document.getElementById（id）；
var totalText=element.textContent；
var toFindText=totalText.substring（开始、结束）；
var torereplacetext=”“+toFindText+”；
element.innerHTML=element.innerHTML.replace（toFindText，torereplaceText）；

希望它能帮助别人

注意：这不会检查两个或多个注释是否指向同一个节点，我现在正在处理它。
最后，我的解决方案是Fiddle

概括：

        var element = document.getElementById(id);
        var totalText = element.textContent;
        var toFindText = totalText.substring(start,end);
        var toReplaceText = "<span class='annotation'>"+toFindText+"</span>";
        element.innerHTML = element.innerHTML.replace(toFindText, toReplaceText);

var-element=document.getElementById（id）；
var totalText=element.textContent；
var toFindText=totalText.substring（开始、结束）；
var torereplacetext=”“+toFindText+”；
element.innerHTML=element.innerHTML.replace（toFindText，torereplaceText）；

希望它能帮助别人

注意：这不会检查两个或多个注释是否引用同一个节点，我正在处理它。
使用
append（）
我在元素末尾添加
2003
，这不是我想要的。我必须突出显示文档中已有的文本。此外，我可以在文本中间进行注释，因此我不能使用AppEnter（）。第二个。我认为这是一个好方法，但是你的代码的结果是：
出版日期（收藏）：2003
我也尝试了
eq（0）
，但在元素的开头插入一个空的span让我弄清楚。您想用
.annotation
span包装空的2003，对吗？说是或否。您可能会使用JavaScript的
.replace（）
函数：
yourText.replace（'2003'，'2003'）append（）
我在元素末尾添加了
2003
，这不是我想要的。我必须突出显示文档中已有的文本。此外，我可以在文本中间进行注释，因此我不能使用AppEnter（）。第二个。我认为这是一个好方法，但是你的代码的结果是：
出版日期（收藏）：2003
我也尝试了
eq（0）
，但在元素的开头插入一个空的span让我弄清楚。您想用
.annotation
span包装空的2003，对吗？说是或否。您可能会使用JavaScript的
.replace（）
函数：
yourText.replace（'2003'，'2003'）必须迭代所有文本节点。对于每个文本节点，使用单词作为分隔符进行拆分。迭代结果并生成一个文本节点，如果字符串不是word元素，则它不是span元素。在原始文本节点之前插入新闻节点。上次删除原始文本节点。很抱歉，我没有很好地理解您的答案，您能给我一个应用于示例中
元素的简短片段吗？不完全是，这就是为什么这是一个注释，而不是答案。你需要以不同的方式开始。不匹配元素节点并获取其“文本”，而是直接获取文本节点。文本节点包含要高亮显示的单词，需要替换为新节点。几年前，我用PHP实现了这个功能……好吧，我发现了一个有问题的函数，并尝试在中使用它。变量是正确的，但似乎从未找到textnode，因此它从未更改内容。你能帮我吗？你必须遍历所有的文本节点。对于每个文本节点，使用单词作为分隔符进行拆分。迭代结果并生成一个文本节点，如果字符串不是word元素，则它不是span元素。在原始文本节点之前插入新闻节点。上次删除原始文本节点。很抱歉，我没有很好地理解您的答案，您能给我一个应用于示例中
元素的简短片段吗？不完全是，这就是为什么这是一个注释，而不是答案。你需要以不同的方式开始。不匹配元素节点并获取其“文本”，而是直接获取文本节点。文本节点包含要高亮显示的单词，需要替换为新节点。几年前，我用PHP实现了这个功能……好吧，我发现了一个有问题的函数，并尝试在中使用它。变量是正确的，但似乎从未找到textnode，因此它从未更改内容。你能帮我吗？在这种情况下，你知道开始和结束（在本例中，您知道开始和结束：(
        var element = document.getElementById(id);
        var totalText = element.textContent;
        var toFindText = totalText.substring(start,end);
        var toReplaceText = "<span class='annotation'>"+toFindText+"</span>";
        element.innerHTML = element.innerHTML.replace(toFindText, toReplaceText);