Javascript: Replace string in html without destroying the elements for future event handlers
<p>I have this code that searches for a given string of characters (<code>_aff.tractionsCode</code>) and replaces it with another string (<code>tractionsId</code>), like so:</p>

<pre><code>content = document.body.innerHTML.replace(_aff.tractionsCode, tractionsId);
document.body.innerHTML = content;
</code></pre>

<p>Here's an example:</p>

<p>Assume <code>_aff.tractionsCode</code> is equal to {tractionsCode}</p>

<pre><code>&lt;div class="affiliate" rel="{tractionsCode}"&gt;{tractionsCode}&lt;/div&gt;
</code></pre>

<p>It would need to replace both instances of {tractionsCode}</p>

<p>However, the problem is once this happens, it is replacing the loaded html so other javascript event handlers, which I may or (most likely) may not have access to, no longer function properly.</p>

<p>Is there a way to look through the html (including attributes like rel) and run the replace without overwriting all the html?</p>

<p>Or is there a better way entirely?</p>

<p>Thanks for the help!</p>
