Jquery（input / textarea）.val（）：如何在不更改DOM的情况下添加内容？

Question

在这里看看JsFiddle：

http://jsfiddle.net/ru2Fg/2/

基本上，它以两个textarea开头：一个空，一个里面有东西，一个input type=text。我的印象是，要将内容放在input中，您将其更改为value，并将内容放入textarea中，您将该文本作为子项添加到节点中。

我执行$(...).val(...)来更改其内容。他们的内容做改变。

然而，DOM看起来完全一样！我用console.log()打印出3个元素;他们似乎没有变化我用chrome的检查元素看着它们：它们似乎没有改变。

我看过jQuery's val() method change doesn't seem to change the DOM，但是这个问题得出的结论是火狐虫没有刷新它显示的HTML。在这种情况下，我非常确定inspect元素会显示页面上存在的当前 html：例如，当事情滚动时，我看到left属性发生了剧烈的变化。我也在使用控制台检查它，它告诉我同样的事情：没有改变。

但是，我的眼睛告诉我已经改变了，因为我看到的是“10，omg，moo”，而不是“空白，你好世界，2000”。发生了什么事？

编辑：我发布了错误的jsFiddle。这应该是正确的

Answer 1

value 属性与value 属性之间存在差异。当您在输入框中键入内容时，您将更改属性，而不是属性。该属性与加载文档时的属性保持一致。除此之外，这意味着您可以使用elem.value = elem.getAttribute('value');将输入框重置为其默认值。

同样，如果你有一个下拉列表<select>，其中一个选项设置了selected属性，即使你选择了一个不同的选项，即使{{{{ 1}}属性现在是selected。

这同样适用于复选框和false属性。同样适用于checked属性，以及其他一些属性。

Answer 2

实际上它正在改变DOM，无论如何10个文本区域中没有出现的其他方式。问题在于萤火虫本身（在旧的列表中），我不确定它是否仍然可用于新的萤火虫。

要验证，您可以使用firefox或chrome控制台的Web控制台。

Answer 3

在jQuery发生之前，DOM被完全加载，因此从技术上讲，调试器看不到插入DOM中的数据。调试工具只能看到渲染的内容，因此您将无法操纵通过jQuery到达的“事后”数据。您可以将其视为“带外”或以某种方式捏造DOM。 AJAX也是如此。如果使用.load（）等AJAX方法添加数据或页面内容，则不会在DOM中看到它。

jQuery中的输入框有val（）方法 - 这是value属性，在textarea中，它通常是html（）方法，textarea包含的内容。