Axel Richter: Problem beim Einhängen eines neuen Kindknotens

Beitrag lesen

Hallo,

Mein Problem gestaltet sich folgendermaßen:
Ich habe ein Formular, in welchem sich eine Auswahlliste befindet.
Je nachdem, was da ausgewählt wird, soll mit Hilfe von AJAX eine zweite Auswahlliste eingefügt werden.

Diese Auswahlliste liegt in einem XML Dokument, welches mit php erzeugt wird, was so aussieht:

<?xml version="1.0" encoding="utf-8"?>

<select name="list_name" size="1">
  <option value="value1">Text1</option>
  <option value="value2">Text2</option>
  <option value="value3">Text3</option>
  <option value="value4">Text4</option>
</select>


>   
> Der relevante JavaScript Text sieht so aus:  
>   
> ~~~javascript
  

> var xmldoc = http_request.responseXML;  
> var select_node = xmldoc.getElementsByTagName('select').item(0);  
>   
> document.getElementById('insert_tag').replaceChild(select_node, document.getElementById('insert_tag').firstChild);  
> 

Ähm, nein, Du kannst nicht einfach ein XMLNode als HTMLElement in ein HTMLDocument einhängen.

Die "einfache" Lösung wäre, mit dem responseText zu arbeiten und diesen als innerHTML des DIVs zu schreiben:

  
document.getElementById("insert_tag").innerHTML = http_request.responseText;  

Wobei diese _sehr_ einfache Holzhammermethode auch die XML-Deklaration <?xml version="1.0" encoding="utf-8"?> mit ins innerHTML schreibt. Das stört zwar nicht, ist aber auch nicht schön. Es ließe sich ja aber mit einigen String-Manipulationen am http_request.responseText auch noch vermeiden.

Willst Du wirklich mit DOM arbeiten, musst Du aus den XMLNodes erst mal HTMLElemente machen.

etwa:

  
var myXMLSelect = http_request.responseXML.getElementsByTagName("select").item(0);  
var myHTMLSelect = document.createElement("select");  
myHTMLSelect.name = myXMLSelect.getAttribute("name");  
myHTMLSelect.size = myXMLSelect.getAttribute("size");  
var myXMLOptions = myXMLSelect.getElementsByTagName("option");  
var myHTMLOption = null;  
for (var i = 0; i < myXMLOptions.length; i++) {  
  myHTMLOption = new Option(myXMLOptions[i].firstChild.nodeValue, myXMLOptions[i].getAttribute("value"), false, false);  
  myHTMLSelect.options[myHTMLSelect.options.length] = myHTMLOption;  
}  
  
document.getElementById("insert_tag").replaceChild(myHTMLSelect, document.getElementById("insert_tag").firstChild);  

viele Grüße

Axel