Javascript JS/Jquery在不破坏事件的情况下替换内部文本

这是html：

<div id="div001">
  This is ${Row.1}.
  <p>${Row.2} explain something else.</p>
  <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p>
</div>

这是${Row.1}。
${Row.2}请解释其他内容

${Row.3}欢迎您${你好，世界}，这是一个新世界

我要做的是将

${Row.1}

替换为文本

第1行

，而不替换整个

div001

DIV。因为这将破坏

&

上的事件

我目前能够通过所有元素实现循环并找到子节点（其中没有html标记），在本例中是第一个
&
，并用JQUERY
$（ele）.text（）替换该单词

但是我仍然找不到替换${Row.1}&${Row.3}的方法

请告诉我，谢谢。
您可以创建一个递归函数，该函数迭代所有子节点，如果它们是文本节点，则替换它们的文本-如果它们是元素节点，则递归调用它们上的函数：


函数替换文本节点（elm）{
elm.childNodes.forEach（（节点）=>{
if（node.nodeType==3）{
//文本节点：
node.textContent=node.textContent.replace（/\${（[^}]+）}/g，“$1”）；
}else if（node.nodeType==1）{
//元素节点，递归：
replaceTextNodes（节点）；
}
});
}
replaceTextNodes（document.querySelector（'#div001'）

这是${Row.1}。
${Row.2}请解释其他内容

${Row.3}欢迎您${你好，世界}，这是一个新世界

我能想到的最简单的方法就是用
包装它。然后您可以使用
$（'#div001>span'）
将其作为目标：


$（'#div001>span'）。文本（'Replaced'）

这是${Row.1}。
${Row.2}请解释其他内容

${Row.3}欢迎您${你好，世界}，这是一个新世界

您是否也要将
${Hello.World}
替换为
“Hello World”
？我也想到了这一点，但中的新功能是针对现有网站的，不太可能要求他们查看所有html并用新的html标记包装：（您可以使用正则表达式，而无需更新HTML。我已更新了我的答案以展示这一点。每当您替换innerHTML时，它都会破坏事件。您将它放在JS代码之前，然后您将看到它在单击行时不起作用。2:
document.getElementsByTagName（“p”）[0]。addEventListener（“单击”，function（）{console.log(“单击”）}）