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

Jquery (input/textarea).val(): how is it adding content without changing the DOM?

本文关键字：DOM 情况下添加 textarea input val Jquery 更新时间：2023-09-26

在这里查看JsFiddle：

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

从本质上讲，它从两个textarea开始：一个是空的，一个里面有东西，还有一个input type=text。我的印象是，要把东西放在input中，就要把它改为value，而要把东西放到textarea中，就需要把文本作为子节点添加到节点中。

我执行$(...).val(...)来更改它们的内容。并且它们的内容确实发生了变化。

然而，DOM看起来完全一样！我正在用console.log()打印出这3个元素；它们似乎没有变化。我用chrome的inspect元素来观察它们：它们似乎没有变化。

我看过jQuery'；s val（）方法更改不会'；似乎没有改变DOM，但这个问题得出的结论是，firebug没有刷新它显示的HTML，这很有趣。在这种情况下，我确信inspect元素显示了页面上存在的当前html：例如，当滚动时，我看到left属性剧烈变化。我也在使用控制台检查它，这告诉我同样的事情：没有改变。

不过，我的眼睛告诉我，发生了一些变化，因为我看到的是"10，omg，moo"，而不是"空白，你好，世界，2000"。怎么回事？

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

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

类似地，如果您有一个下拉<select>，其中一个选项设置了selected属性，即使您选择了其他选项，即使selected属性现在是false，该属性也将仍然存在。

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

事实上，它正在更改DOM，其他方式无论如何都不会在文本区域中显示10。问题出在firebug本身（列出旧的），我不确定它是否在新的中仍然可用。

为了验证，您可以使用firefox的web控制台或chrome的控制台。

在任何jQuery发生之前，DOM都已完全加载，因此从技术上讲，调试器看不到插入DOM中的数据。调试工具只能看到渲染的内容，因此您将无法操作通过jQuery到达的"事后"数据。您可以将其视为"带外"或在某种程度上篡改DOM。AJAX也是如此。如果您使用像.load（）这样的AJAX方法添加数据或页面内容，您将不会在DOM中看到它。

jQuery中的一个输入框有val（）方法——这是value属性，在文本区域中，它通常是html（）方法，文本区域包含什么。