innerHTML within another tag
<p>I have a link:</p>

<pre><code>&lt;a id="nextBut" href="somelink" class="button"&gt;&lt;span&gt;Next Step&lt;/span&gt;&lt;/a&gt;
</code></pre>

<p>And I can control the the <code>&lt;span&gt;Next step&lt;/span&gt;</code> part with innerHTML but how could I leave the <code>&lt;span&gt;</code> alone and just change the 'Next step' part?</p>

<p>For example:</p>

<pre><code>var NextButJar = document.getElementById('nextBut');
NextButJar.disabled = true;
NextButJar.style.opacity = .5;
NextButJar.span.innerHTML = 'Read all tabs to continue';
</code></pre>

<p>I also have:</p>

<pre><code>NextButJar.onClick = handleClick;
function handleClick(){
    if (this.disabled == true) {
        alert("Please view all tabs first!");
        return;
    } else {
        alert("allowed to run");
    }
};
</code></pre>

<p>Which I can't seem to get working either...</p>

<p>UPDATE</p>

<pre><code>NextButJar.addEvent("click", function() {
    if (this.disabled == true) {
        alert("Please view all tabs first!");
        return;
    }
});
</code></pre>

<p>Works in everything but Explorer...</p>
