查找+替换元素的内容而不会丢失事件

Question

我有一个函数，它读取元素的内容，用链接替换一个单词，然后将内容重写回元素。显然，这意味着之前设置的所有事件都将丢失。

是否有人知道可以在不丢失事件的情况下找到并替换元素内容的函数/方法？

编辑：不使用库

这是我当前的代码，它不会破坏事件，但会将<转换为<，因此我无法附加HTML。这是我最接近的：

element.appendChild(document.createTextNode(content));

我的原始代码有效，但摆脱了这些事件：

element.innerHTML += content;

Answer 1

使用jQuery，您可以使用text()方法

var str = $('#element-id').text();
str = yourReplaceFunction(str);
$('#element-id').text(str);

---

修改

另一个选项是innerHTML属性。它不是很优雅，但仍然有效。

var strElem = document.getElementById('element-id');
var str = strElem.innerHTML;
str = yourReplaceFunction(str);
strElem.innerHTML = str;

---

<强> EDIT2：

另一种选择是将要替换的文本包装在单独的标记内，例如<span>。

<div id="container">
   <a id="link-with-events">Link</a>
   <span id="replaceable">The Text Gets Replaced</span>
   <a id="more-links-with-events">Another Link</a>
</div>

然后您只需访问并替换span标记的内容，保持周围元素不变。

Answer 2

假设标签只包含文本（而不是其他标签）：

element.firstChild.nodeValue=content;

见https://jsfiddle.net/Abeeee/ubj6hte4/