Javascript 使用 jQuery 设置动态创建的文本框的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2158954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting the value of a dynamically created text box with jQuery
提问by Mason
Using the following code
使用以下代码
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());
I get the following
我得到以下
<input name="textbox" id="textbox" type="text">
I get the same thing with
我得到同样的东西
$("#textbox").val("test");
Using
使用
newTextBox = $("<input/>");
Doesn't help either
也没有帮助
Where is my value?
我的价值在哪里？
EDIT: SOLTUION
编辑：解决方案
So, further up in the stack I was converting the DOM I built to a string and since - like munch mentioned - the dynamic value doesn't get added to the tag, it wasn't showing up.
因此，在堆栈的更深处，我将我构建的 DOM 转换为字符串，并且因为 - 就像蒙克提到的 - 动态值没有被添加到标签中，它没有显示出来。
Thanks for the help
谢谢您的帮助
回答by munch
jQuery will not put the value into the created element's generated html. Both .attr('value', 'blah')and .val()get the current value of what's been entered or changed in the text input, and allow you to see that value when you look at the input on the page or submit it to the server. However, you will not see it when looking at the html.
jQuery 不会将该值放入创建的元素生成的 html 中。双方.attr('value', 'blah')并.val()得到一个什么样的被输入或在文本输入改变当前值，让你看到这个值，当你在网页上输入或将其提交到服务器。但是，您在查看 html 时不会看到它。
You can still manipulate the value all you want, you just won't see any changes in firebug, like you do with class changes, styling, etc.
您仍然可以随心所欲地操作该值，只是看不到 firebug 中的任何更改，就像您对类更改、样式等所做的那样。
AFAIK, this is the same without using jQuery. The same thing happens with:
AFAIK，这与不使用 jQuery 的情况相同。同样的事情发生在：
document.getElementById('textbox').value = 'my text';
The value attribute is only to set something's value from the server. It's not needed with javascript.
value 属性仅用于从服务器设置某物的值。javascript不需要它。
Also, it depends on the type of input that you're using. For example, you will see the value attribute changes with a hidden input, but not with the textbox.
此外，这取决于您使用的输入类型。例如，您将看到 value 属性随隐藏输入而变化，但不会随文本框发生变化。
EDIT:
编辑：
By appending newDiv to the body, the text box and the value show up using your code. Here's a test page. You can see both the code and the preview of what happens. The alert though, does not show any 'value' attribute for reasons explained above.
通过将 newDiv 附加到正文，文本框和值会使用您的代码显示出来。这是一个测试页面。您可以看到代码和发生的事情的预览。但是，由于上述原因，警报没有显示任何“值”属性。
回答by Thiago Belem
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());
回答by Gabriele Petrioli
With a little hack you can do it ..
只需一点点技巧，您就可以做到..
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());
1st define its type as hidden, because this will allow the value attribute, and then using code change it to text ..
第一个将其类型定义为隐藏，因为这将允许 value 属性，然后使用代码将其更改为 text ..
回答by Gijserman
$("#element")[0].setAttribute("value","newvalue");
回答by Sanyam Jain
One can also do this
也可以这样做
var chip = document.createElement("div");
chip.innerHTML="some value here"
card.appendChild(chip)
var chip = document.createElement("div");
chip.innerHTML="some value here"
card.appendChild(chip)
