jQuery Ajax und append()

[Tronjer]

Ich schreibe hier gerade ein Script, das dynamisch DOM-Elemente hinzufügen und löscht.

<div id="button"><button>Klick Mich</button></div>
<div id="box"></div>

<script>
$('#button').click(function() {
  $('#box').append('<p><button class="test">Remove</button></p>');
});

$('.test').live('click',function() {
  $(this).closest('p').remove();
});
</script>

Allerdings soll im fertigen Script erheblich mehr HTML über append() eingefügt werden. Weswegen ich es nicht direkt in die Funktion schreiben, sondern auslagern und per Ajax nachladen will.

Das hier erzeugt verständlicher Weise einen Hierarchie-Error:

$('#button').click(function() {
  $('#box').appendTo($('#box').load('remove.php'));
});

Aber auch wenn ich mir ein zusätzliches Div baue, erst den Ajax-Request ausführe und append() als Callback anhänge, funktioniert es nicht.

<div id="button"><button>Klick Mich</button></div>
<div id="box">
  <div></div>
</div>

<script>
$('#button').click(function() {
  $('#box').load('remove.php', function() {
    $('#box').appendTo($('#box div'));
  });
});
</script>

Nun könnte ich es vielleicht mit einem Workaround versuchen und ein temporäres, unsichtbares HTML-Tag erzeugen, dort den Inhalt von load() zwischenspeichern, diesen zu $('#box') transportieren und zum Schluss das Tag wieder löschen. Aber Spaghetti-Code ist leider keine Option.

Hätte jemand einen Tipp, wie sich so etwas sauber umsetzen lässt? Das muss doch irgendwie gehen.

 

[Tronjer]

Wie vermutet war die Lösung natürlich ganz simpel, aber nach 14h vor dem Rechner kann sich schon mal ein Tunnelblick einstellen.

Wen es interessiert: Man zerlegt die Funktion in zwei Schritte. Erst wird ein leeres Div erstellt, anschließend zum letzten child innerhalb #box traversiert und erst dann der Ajax Request ausgeführt.

$('#button').click(function() {
  $('#box').append('<div></div>');
  $('#box div').last().load('remove.php');
});