innerHTML - Driving me Insane

I have a simple JavaScript thing that's driving me bonkers.

Instead of the output being a link with 'subSectionNames[i]' as text (I've tried replacing with with simple "test" but the result is the same: It's spitting out the URI as plaintext: "domain.com/resume.php". No linkification whatsoever.

Thoughts?

Controlled Assumptions for Testing:

var subSectionNames = Array("Hired Positions", "Contract Positions");
resume.addSubSections(subSectionNames);

(stuff comes in between)

this.addSubSections = function(subSectionNames) {
            subSectionHeading = document.createElement('span');
            subSectionHeading.setAttribute('id', 'subHeading');
            subSectionHeading.setAttribute('class', 'resumeSubHeading');
            for (var i=0;i<subSectionNames.length;i++) {
                    var link = document.createElement('a');
                    link.setAttribute('class', 'resumeSubHeadingLink');
                    link.setAttribute('href', '#');                 
                    var clickEvent = "showSubHeading('" + subSectionNames[i] + "')";
                   开发者_StackOverflow中文版 link.setAttribute('onClick', clickEvent);
                    link.innerHTML=subSectionNames[i];
                    link.innerHTML="test"+i;
                    subSectionHeading.innerHTML = subSectionHeading.innerHTML + link;
            }
            document.getElementById('leftInner').appendChild(subSectionHeading);
    }

You can't set the innerHTML to a DOM object---it holds a string only! Instead, use subSectionHeading.appendChild(link).