Unsortierte Liste dynamisch erweitern (Kinder nachladen)

[südpol]

Hi,

kann mir jemand sagen wie ich einer unsortierten Liste mittels Javascript neu Kinder hinzufügen kann? Die Grundsätzlichen funktionen dahinter als (XML HTTP request etc) ist klar. Mir geht es nur um die konkrete Funktion um diese Liste:

<ul>
<li id="1">Element eins <a href="#" onclick='getChild("1"); return false;'>klick</a></li>
<li id="2">Element zwei<a href="#" onclick='getChild("2"); return false;'>klick</a></li>
</ul>

Bei einem Response meiner Funktion von dem:

<ul>
<li id="3">Das Kind</li>
</ul>

In das zu verwandeln:

<ul>
<li id="1">Element eins <a href="#" onclick='getChild("1"); return false;'>klick</a>
<ul>
<li id="3">Das Kind</li>
</ul>
</li>
<li id="2">Element zwei<a href="#" onclick='getChild("2"); return false;'>klick</a></li>
</ul>

Ich habe bis jetzt immer folgendes gemacht:

document.getElementById(ElementID).innerHTML = response;

Aber das würde in meinem Beispiel ja bedeuten, dass ich auch den Inhalt des schon vorhandenen li's nochmal senden müßte - hier gibt es bestimmt einen schönere Funktion mit der ich den content einfach an die schon vorhandenen Daten anhängen kann, oder?

 

[CPoly]

hier gibt es bestimmt einen schönere Funktion mit der ich den content einfach an die schon vorhandenen Daten anhängen kann, oder?

Die Funktion nennt sich appendChild
http://www.w3schools.com/dom/met_element_appendchild.asp

 

[südpol]

Hi,

das war auch mein erster Gedanke - den lehnt mein Browser aber ab (oder ich mache etwas falsch).

xmlHttp.responseText enthält diese Rückgabe des php scripts:

<ul>
<li id="3">Das Kind</li>
</ul>

und wird so in meiner javascript funktion verwendet:

document.getElementById('1').appendChild(xmlHttp.responseText);

Die Fehlermeldung bei diesem Aufbau sagt (lt. FF Webdeveloper Extension):

[11:48:00.296] uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://MeineApp/javascripts/AJAX_Objectives.js :: <TOP_LEVEL> :: line 15" data: no]

wobei line 15 die oben abgebildete Zeile ist und xmlHttp.responseText mit den richtigen Werten gefüllt ist.

... bis jetzt habe ich mit appendChild auch immer nur Elemente angehängt, die ich direkt in JS z. B. mit createElement() erstellt habe - das geht in diesem Fall aber nicht.

Kann mir jemand sagen was ich falsch mache bzw. besser kann man jemand sagen wie ich es richtig machen?

Danke

 

[CPoly]

Die Möglichkeiten fallen mir ein:

1. Ändere dein response um, so dass es kein HTML String mehr ist, sondern Daten (XML oder JSON). Dann kannst du diese via createElement in dein Dokument einfügen. Und du musst weniger Daten übertragen, was bei AJAX schnell mal deutlich die Reaktionszeit erhöht.

2. Benutze "document.getElementById(ElementID).innerHTML += response;" (man beachte das Plus Zeichen).

 

[südpol]

Hi!

Danke - Lösung Nr. 2 war genau das was ich gesucht habe! Für den Lösungsweg Nr. 1 muss ich vermutlich noch deutlich mehr lernen um diesen auf JS Seite umsetzen zu können.

Vielen Dank für die Hilfe!