Tag: DOM

Vorgestern trat ich mal wieder in eine Endlosschleife ein. Eigentlich wollte ich nur in einem XHTML-Dokument den Text innerhalb einer bestimmten Überschrift mit JavaScript zu einem Link umwandeln und diesen mit dem onclick-Attribut versehen. Quasi so:

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.