Question

I have this code that searches for a given string of characters (_aff.tractionsCode) and replaces it with another string (tractionsId), like so:

content = document.body.innerHTML.replace(_aff.tractionsCode, tractionsId);
document.body.innerHTML = content;

Here’s an example:

Assume _aff.tractionsCode is equal to {tractionsCode}

<div class="affiliate" rel="{tractionsCode}">{tractionsCode}</div>

It would need to replace both instances of {tractionsCode}

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.

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

Or is there a better way entirely?

Thanks for the help!

Answer 1

Going via innerHTML of the body is going to overwrite everything. You need to search for the specific text nodes that you want to replace.

Something like..

document.getElementBy..('identifier').innerHTML

In jQuery,

$('.className').text('text to insert');