allerAnfangIstSchwer: createElement: input radio

Hallo verehrte Community,

ich erbitte eure Hilfe zu einem Problem. Vielleicht ist`s nur ein Leichtsinnsfehler, aber ich komme leider nicht drauf.

Ich möchte (aus einem Array) mehrere Radio-Buttons erzeugen. Soweit dachte ich, wäre das kein Problem, aber es zeigt mir im Browser leider keinen Text / Beschreibung an, sondern nur die Anklick-Elemente (=Radio-Button`s ohne Text).

Hier mein Code:


var personen = ["Maier", "Müller", "Huber"];

for(i=0;i<personen.length;i++){
			var auswahlElement = document.createElement("input");
			auswahlElement.setAttribute("type", "radio");
			auswahlElement.setAttribute("name", "personen");
			auswahlElement.setAttribute("value", personen[i]);
			var auswahlElementText = document.createTextNode(personen[i]);
			auswahlElement.appendChild(auswahlElementText);
			document.getElementById("body").appendChild(auswahlElement);
}

Der Browser (IE, DOM Explorer) zeigt mir dann z.B. beim Element dann folgendes an: <input name="personen" type="radio" value="Maier">Maier</input>

ABER: Der Text "Maier" wird eben nicht ausgegeben.

Kann mir vielleicht jemand weiterhelfen, woran das liegt bzw. wie ich den Text zum Feld erhalte? Vielen Dank.

  1. Der Browser (IE, DOM Explorer) zeigt mir dann z.B. beim Element dann folgendes an: <input name="personen" type="radio" value="Maier">Maier</input>

    ABER: Der Text "Maier" wird eben nicht ausgegeben.

    Kann mir vielleicht jemand weiterhelfen, woran das liegt bzw. wie ich den Text zum Feld erhalte?

    Ist doch klar. Du hängst den Textknoten Meier als Kind IN das Input - und da hat das nichts verloren.

    Lösung: Erzeuge ein label mit 2 Kindern und hänge das ins Dom:

    <label>[Kind 1:]<input name="personen" type="radio" value="Maier">[Kind 2:]Maier</label>

    Jörg Reinholz