Ajuste del valor de un cuadro de texto creado dinámicamente con jQuery

Question

Usando el siguiente código

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()); 

me sale el siguiente

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

tengo la misma cosa con

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

Uso

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

No ayuda tampoco

¿Dónde está mi valor?

EDIT: SOLTUION

Así, más arriba en la pila estaba convirtiendo el DOM I construido en una cadena y dado que - como se ha mencionado Munch - el valor dinámico no se han agregado a la etiqueta, se no estaba apareciendo.

Gracias por la ayuda

Answer 1

jQuery no van a poner el valor en el elemento creado de HTML generado. Ambos .attr('value', 'blah') y .val() obtienen el valor actual de lo que se ha ingresado o modificado en la entrada de texto, y le permiten ver ese valor cuando mira la entrada en la página o la envía al servidor. Sin embargo, no lo verá cuando vea el html.

todavía se puede manipular el valor de todo lo que quieren, que simplemente no hay cambios en Firebug, como se hace con los cambios de clase, estilo, etc.

yo sepa, esta es la misma sin necesidad de utilizar jQuery. Lo mismo sucede con:

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

El atributo de valor solo sirve para establecer el valor de algo del servidor. No es necesario con javascript.

Además, depende del tipo de entrada que esté utilizando. Por ejemplo, verá que el atributo de valor cambia con una entrada oculta, pero no con el cuadro de texto.

EDIT:

Añadiendo newDiv al cuerpo, el cuadro de texto y el valor aparecen utilizando su código. Here's a test page. Puede ver el código y la vista previa de lo que sucede. La alerta, sin embargo, no muestra ningún atributo de "valor" por las razones explicadas anteriormente.

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 pequeño truco que puede hacerlo ..

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()); 

primero definir su tipo que oculta, ya que esto permitirá que el atributo de valor y, a continuación, utilizando el cambio de código a texto ..

Answer 4

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

Answer 5

también se puede hacer esto

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