Impostando il valore di una casella di testo creato in modo dinamico con jQuery

Question

utilizzando il seguente codice

var newDiv = $(document.createElement("div")); 
var newTextBox; 

newTextBox = $(document.createElement("input")) 
    .attr("type", "text") 
    .attr("id", "textbox") 
    .attr("name", "textbox"); 

newTextBox.val("text"); 
newDiv.append(newTextBox); 
alert(newDiv.html()); 

ottengo il seguente

<input name="textbox" id="textbox" type="text"> 

ottengo la stessa cosa con

$("#textbox").val("test"); 

Utilizzando

newTextBox = $("<input/>"); 

Non aiuta né

Dove è il mio valore?

EDIT: soltuion

Così, più in alto nello stack stavo convertendo il DOM ho costruito in una stringa e dal momento che - come Munch detto - il valore dinamico non viene aggiunto al tag, non si stava mostrando.

Grazie per l'aiuto

Answer 1

jQuery non mettere il valore nell'elemento creato del HTML generato. Entrambi .attr('value', 'blah') e .val() ottengono il valore corrente di ciò che è stato inserito o modificato nell'input di testo e consentono di vedere quel valore quando si guarda l'input sulla pagina o lo si invia al server. Tuttavia, non lo vedrai quando guardi l'html.

è ancora possibile manipolare il valore di tutto quello che vuoi, basta non si vede alcun cambiamento in Firebug, come si fa con i cambiamenti di classe, stile, ecc

per quanto ne so, questo è lo stesso senza l'utilizzo di jQuery. La stessa cosa accade con:

document.getElementById('textbox').value = 'my text'; 

L'attributo valore è solo per impostare il valore di qualcosa dal server. Non è necessario con javascript.

Inoltre, dipende dal tipo di input che si sta utilizzando. Ad esempio, vedrai che l'attributo value cambia con un input nascosto, ma non con la textbox.

EDIT:

Aggiungendo nuovoDiv al corpo, la casella di testo e il valore si presentano utilizzando il codice. Here's a test page. Puoi vedere sia il codice che l'anteprima di ciò che accade. Tuttavia, l'avviso non mostra alcun attributo "valore" per le ragioni sopra illustrate.

Answer 2

var newDiv = $(document.createElement("div")); 

var newTextBox = $('<input />') 
    .attr("type", "text") 
    .attr("id", "textbox") 
    .attr("name", "textbox") 
    .val("my text"); // <-- You can use here... 

newTextBox.val("my text"); // <-- or here 
newDiv.append(newTextBox); 
alert(newDiv.html()); 

Answer 3

Con un piccolo hack si può farlo ..

var newDiv = $('<div/>'); 
var newTextBox; 

newTextBox = $('<input/>') 
    .attr("type", "hidden") 
    .attr("id", "textbox") 
    .attr("name", "textbox"); 

newTextBox.val("text"); 
newDiv.append(newTextBox); 
newTextBox.each(function(){this.type='text';}); 
alert(newDiv.html()); 

prima definire il suo tipo come nascosto, perché questo permetterà l'attributo value, e quindi utilizzando modifica del codice in testo ..

Answer 4

$("#element")[0].setAttribute("value","newvalue"); 

Answer 5

Si può anche fare questo

var chip = document.createElement("div"); chip.innerHTML="some value here" card.appendChild(chip)