Find + replace content of an element without loosing events.

Question

Hi, I have a function that reads the content of an element, replaces a word with a link and then rewrites the content back into the element, obviously this means that all events that where previously set are lost. Does anyone know of a function/method that could find and replace content of an element without loosing the events? Thanks.

Edit: Without using a library

Here is my current code that does not destroy the events but turns < for example into < so I can not append HTML. This is the closest I have got.

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

My original code worked but got rid of the events.

element.innerHTML += content;

Answer 1

By using jQuery you could do it with the text() method

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

---

Edit:

Another option would the innerHTML property. It's not very elegant but works nevertheless.

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

---

Edit2:

Yet another option would be to wrap the text you want to replace inside of a separate tag, for example <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>

Then you'd simply access and replace the contents of the span tag, leaving the surrounding elements untouched.