innerHTML within another tag

Question

Hi all,

I have a link:

<a id="nextBut" href="somelink" class="button"><span>Next Step</span></a>

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

For example:

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

I also have:

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

Which I can't seem to get working either...

UPDATE

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

Works in everything but Explorer...

Answer 1

NextButJar.firstChild.innerHTML = "foo";

Will set the HTML in the first child element. If you might also have other content in the node, do something along the lines of

NextButJar.getElementsByTagName("span")[0].innerHTML = "foo";

Answer 2

To use innerHTML give id to the span and change ite innerHTML

<a id="nextBut" href="somelink" class="button"><span id="nextButSpan">Next Step</span></a>