Dynamisch erstelle DOM-Elemente mit Inhalt füllen

[cppnap]

Guten Tag,

mein Problem ist der allgemeine Umgang, wie ich dynamisch erstellte Elemente handle und mit Inhalten fülle. Aktuelles Beispiel:


Für Eingaben im System benutze ich grundsätzlich Bootstrap Modals, die ich mit dem Plugin Bootbox.js handle.
Wenn ich jetzt einen neuen Mitarbeiter anlegen möchte, dann geht ein Modal auf, wo ich nicht nur die Daten des Mitarbeiters eingeben kann, sondern wo ich auch die Geschäftsstellen angebe in denen der Mitarbeiter überall tätig ist.

Die Namen der Geschäftsstellen sollen in das Modal beim Öffnen reingeladen werden, was ich mit folgendem Code vor hatte:


Modal:

bootbox.dialog({
  title: "Add new User", 
  message: '<div id="selectBranches"></div>',
});

Request für die Geschäftsstellen:

$.ajax( {
       url:     url,
       type:    type,
       dataType: "JSON"
    }).done( function(data) {
        for (var i = 0; i < data.length; i++) {
            $('#selectBranches').append(data[i].name);
        }
    });

Wenn ich die for-Schleife auf ein statisches DOM los lasse, dann werden die Namen sämtlicher Geschäftsstellen sofort eingetragen, bei "selectBranches" ist Dies jedoch nicht der Fall, da Dies erst dann angelegt wird, wenn ich den Button drücke um einen neuen User anzulegen.

Jetzt ist meine Frage ganz allgemein: wie handhabe ich dynamisch erstellte DOM-Objekte - denn ich möchte ja nicht nur reine Textinhalte hinzufügen, sondern ggf. später auch diverse Events hinzufügen.

vielen Dank schon mal :-)

 

[fullnewb]

Ich würde für komplexere Dialoge so vorgehen:

var jq = $(document.createElement("div"));
BootstrapDialog.show({
	message: jq,
	onshow: function(dialogRef){
		$.ajax( {
			url:     url,
			type:    type,
			dataType: "JSON"
        }).done( function(data) {
            for (var i = 0; i < data.length; i++) {
                jq.append(data[i].name);
            }
        });
	}
});

Das ist jetzt allerdings ohne bootbox, da ich diese Erweiterung nicht kenne.