Eingabefeld für HTML-Formular erstellen ... aber auch ein 'Label' hinzufügen?

Ich habe ein HTML-Formular. Wenn Sie auf die Schaltfläche klicken, fügt eine JavaScript-Funktion ein neues Feld hinzu. Ich versuche, die Funktion auch eine 'Bezeichnung' für das Feld hinzuzufügen.Eingabefeld für HTML-Formular erstellen ... aber auch ein 'Label' hinzufügen?

Ich habe mit document.createElement („LABEL“) versucht, aber dass mich nicht lassen die Innerhtml ändern (oder vielleicht ist es mache ich falsch ..), noch eine Schließung

hier hinzufügen ist mein Code. Vielen Dank! var instance = 2;

 function newTextBox(element) 
     {  
      instance++; 
      // Create new input field 
      var newInput = document.createElement("INPUT"); 
      newInput.id = "text" + instance; 
      newInput.name = "text" + instance; 
      newInput.type = "text"; 
      instance++; 

      document.body.insertBefore(document.createElement("BR"), element); 
      document.body.insertBefore(newInput, element); 

     } 
    </script> 
</head> 


<body> 
    <LABEL for="text1">First name: </LABEL> 
    <input id="text1" type="text" name="text1"> 
    <LABEL for="text2">Last name: </LABEL> 
    <input id="text2" type="text" name="text2"> 



    <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" /> 
</body>

Quelle

2009-12-23 Matt

Code schreiben, wo Sie ein 'document.createElement versucht zu tun ('LABEL')' so können wir es debuggen. – philfreo

Sorry, gelöscht, weil ich dachte, es war nutzlos: \t \t \t \t var label = document.createElement ("LABEL"); \t \t \t \t label.htmlFor = newInput.id; \t \t \t \t label.value = 'Vorname'; – Matt

So etwas wie "label.value" gibt es nicht. – bobince

function newTextBox(element) 
      {    
        instance++; 
        // Create new input field 
        var newInput = document.createElement("INPUT"); 
        newInput.id = "text" + instance; 
        newInput.name = "text" + instance; 
        newInput.type = "text"; 

        var label = document.createElement("Label"); 

        label.htmlFor = "text" + instance; 
        label.innerHTML="Hello"; 
        instance++; 

        document.body.insertBefore(document.createElement("BR"), element); 
        document.body.insertBefore(newInput,element); 
        document.body.insertBefore(label, newInput);

Beachten Sie, dass for Attribut des Label-Tag, in Javascript htmlFor fo der Label-Objekt an der Immobilie entspricht

Quelle

2009-12-23 06:10:53

Sie können 'label.for' nicht verwenden. Die Antwort von Proto Bassi ist korrekt. – Paul

Eigentlich. Beide Antworten sind in gewisser Hinsicht falsch. Beide befürworten die Verwendung von innerHTML, das ist schlecht, aber wichtiger, das 'for' wird mit label.html eingestelltFür – Rafe

Das Beispiel von Vincent funktioniert nicht.

Try this:

var newlabel = document.createElement("Label"); 
    newlabel.setAttribute("for",id_from_input); 
    newlabel.innerHTML = "Here goes the text"; 
parentDiv.appendChild(newlabel);

Quelle

2012-02-07 21:13:21 Dinkheller

Dies ist die richtige Antwort. Das Attribut 'for' muss mit' setAttribute' gesetzt werden. – Paul

-1 für den Vorschlag der dom-Erstellung und dann innerHTML-Verwendung anstelle von document.createTextNode – Rafe

@Rafe, geben Sie bitte ein Beispiel, wie Sie den Typ auf "Label" setzen und wie Sie ein Attribut auf einem TextNode setzen. Ich weiß nicht, ob dein Kommentar hilfreich ist. – Dinkheller

<div id="somediv"> 
some div 
</div> 

<script> 

var instance = 0; 

function newTextBox(element){    

instance++; 
// Create new input field 
var newInput = document.createElement("INPUT"); 
newInput.id = "text" + instance; 
newInput.name = "text" + instance; 
newInput.type = "text"; 

var newlabel = document.createElement("Label"); 
newlabel.setAttribute("for","text" + instance); 
newlabel.innerHTML = "Here goes the text"; 
document.getElementById("somediv").appendChild(newlabel); 
document.getElementById("somediv").appendChild(newInput); 
} 

</script>

Quelle

2012-11-21 18:04:35 KDawg

Eingabefeld für HTML-Formular erstellen ... aber auch ein 'Label' hinzufügen?

Antwort

Verwandte Themen