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

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标记的内容,保持周围元素不变.