Eingehängte Knoten werden nicht richtig dargestellt

[Frederik]

Hallo!

Da ich mich gerade in AJAX einarbeite, möchte ich eine kleine "Suggest"-Funktion schreiben: Wenn man in ein Formularfeld etwas einträgt, wird eine Liste mit Vorschlägen vom Server geholt und angezeigt.

Dazu habe ich ein Server-Skript, das folgendes Zurückgibt:

  
<div>  
<p>Erster Eintrag</p>  
<p>Zweiter Eintrag</p>  
</div>  

Die zugehörige JavaScript-Funktion sieht so aus:

  
function showHint(name, value) {  
    hint = document.getElementById(name+"hint");  
    if(value.length == 0){  
        hint.innerHTML = "";  
        return;  
    }  
    http_request = getXHR();  
    http_request.onreadystatechange = function(){  
        if (http_request.readyState==4){  
            while(hint.hasChildNodes()){  
                hint.removeChild(hint.firstChild);  
            }  
            hint.appendChild(http_request.responseXML.firstChild);  
        }  
    };  
    url = url + "?ajax=1&action=hint&name=" + name + "&value=" + value;  
    http_request.open('GET', url, true);  
    http_request.send(null);  
}  

Damit soll dem Knoten "hint" das div einfach eingehängt werden. Das scheint auch zu klappen, wenn man sich danach den DOM-Tree der Seite anguckt. Nur wird leider das eingehängte div falsch dargestellt:

ErsterEintragZweiterEintrag

Also völlig ohne Formatierung, die Einträge werden nicht mal als Block-Elemente dargestellt. Alle anderen Formatierungsangaben werden ebenfalls ignoriert.

Ich habe es in Firefox und Opera getestet, in beiden Fällen das gleiche. Hat jemand eine Idee, warum die neuen Elemente nicht korrekt dargestellt werden?

Danke und liebe Grüße
Frederik