vorher:

...
<div>
    <h1 id="header1">Hallo</h1>
</div>
...

nachher:

...
<div>
    <h1 id="header1">
        <a href="#" onclick="alert(this.tagName); return false">Hallo</a>
    </h1>
</div>
...

Dachte mir also, mit etwas DOM-Manipulation läßt sich der ganze Vorgang schön abwickeln und habe mir eine Funktion in dieser Art gebacken:

function tutNicht() {
    var heading = document.getElementById('header1');
    var headingText = document.createTextNode(heading.firstChild.nodeValue);

    var aElem = document.createElement('a');
    aElem.appendChild(headingText);

    var hrefAttrib = document.createAttribute("href");
    hrefAttrib.nodeValue = '#';

    var onclickAttrib = document.createAttribute("onclick");
    onclickAttrib.nodeValue = "alert(this.tagName); return false";

    aElem.setAttributeNode(onclickAttrib);
    aElem.setAttributeNode(hrefAttrib);

    heading.removeChild(heading.firstChild);
    heading.appendChild(aElem);
}

Jetzt wird es interessant. Der Internet Explorer (Version 6+7) führt zwar die Manipulationen am DOM aus (wovon ich mich mittels des IE DomInspectors überzeugte), wenn man dann aber auf den Link klickt wird das OnClick-Event nicht ausgelöst.

Habe länger im Trüben gestochert bis mir die Idee kam, den Link mal unschön über die Eigenschaft innerHTML der Überschrift zu erzeugen. Nun funktioniert die Sache plötzlich auch im IE und die Funktion alert() wir bei klicken aufgerufen:

function tut() {
    var heading = document.getElementById('header1');
    var text = heading.firstChild.nodeValue;
    heading.removeChild(heading.firstChild);

    heading.innerHTML = '<a href="#" onclick="alert(this.tagName); return false;">' + text + '</a>';
}

Ein äußerst interessantes Phänomen welches es noch zu ergründen gilt.