Javascript Replace() and innerHTML

Forget it. Never hack around with the innerHTML, there's no guarantee it will be in any particular format, you're very likely to mess up the markup by replacing the wrong thing, and even if it works, you're serialising the document content into a string, hacking it and then recreating the entire content from the string again, instead of just replacing a particular thing you're interested in. This is slow and loses all non-serialisable data (like form field values, JS references and assigned event handlers).

In general DOM methods are much more reliable for altering page content. It's what they were designed for. Use them, and use the DOM Level 1 HTML properties in preference to setAttribute which is badly broken in IE. This goes double for event handler attributes. Trying to hack at JavaScript code inside an attribute value inside an HTML string is insanity, even if it worked.

There is no need whatsoever to replace any page content. You could implement your example much more easily with a simple variable:

<div id="hi">
   <span>Mer<span>Mer</span></span>
</div>
<a id="foo">Click</a>

<script type="text/javascript">
    var potato= 'cake';

    document.getElementById('foo').onclick= function() {
        potato= 'jump';
        return false;
    };

    var spans= document.getElementById('hi').getElementsByTagName('span');
    for (var i= spans.length; i-->0;) {

        spans[i].onclick= function() {
            alert(potato); // do whatever with the variable
        };
    }
</script>

First, you have an error in your HTML:

<a onclick='fun()';)>Click</a>

What's with the ;) outside the attribute value?

Next...

[...] method as my real example has several nested tags and I want to replace 'cake' in several different places.

This means you really, really don't want to use innerHTML and replace(). It will screw up. Use an HTML parser of sorts; walk the DOM recursively... anything other than replace.

Within the scope of your specific example, I suggest using a variable to hold the value of cake and jump instead.

Change your replace call to use the RegEx "global" flag:

divs.innerHTML = divs.innerHTML.replace(/cake/g,"jump");

That said, if you're using this for more than a quick test, you should use DOM objects to accomplish what you would like to do. Otherwise, this will get ugly really fast.

Also, it wouldn't hurt to change your <a> tag code:

<a onclick='fun(); return false;')>Click</a>

(The return false; is optional, but good practice.)

The easiest way to change the onclick parameter is to make it a variable instead of a string literal. Here I'm using a variable called food:

<script type="text/javascript">

var food = "cake";

function change()
{
   food = "jump";
}

</script>

<div id="hi">
   <span onclick="alert(food);">Mer<span onclick="alert(food);">Mer</span></span>
</div>
<a onclick='change()'>Click</a>