Jquery（input/textarea）.val（）：它如何在不改變DOM的情況下添加內容？

看看這裏的jsfiddle：一個空，一個帶裏面的東西，和input type=text：Jquery（input/textarea）.val（）：它如何在不改變DOM的情況下添加內容？

從本質上講，它有兩個textarea S初始狀態。我的印象是，把東西放在input你改變它的value，並把東西放在textarea你添加文本作爲一個孩子的節點。

我執行$(...).val(...)來更改其內容。而他們的內容做更改。

但是，DOM看起來完全一樣！我用console.log()打印出3個元素;他們似乎沒有改變我用鉻的檢查元素看着他們：他們似乎沒有改變。

我已經看過jQuery's val() method change doesn't seem to change the DOM，但是這個問題得出結論，它與螢火蟲並不刷新它顯示的HTML有趣。在這種情況下，我很確定檢查元素顯示頁面上存在的當前的 html：例如，我已經看到left屬性在事物滾動時會發生瘋狂變化。我也使用控制檯檢查它，它告訴我同樣的事情：沒有任何改變。

雖然我的眼睛告訴我一些東西有變了，因爲我看到的是「10，omg，moo」而不是「空白，你好世界，2000」。這是怎麼回事？

編輯：我發佈了錯誤的jsFiddle。這應該是現在正確的一個

來源

2012-04-05 Li Haoyi

Firebug並不總是顯示（在其HTML選項卡中）最新版本的DOM。要在螢火蟲中「刷新」顯示的HTML，您可以選擇一個父節點（正文總是一個不錯的選擇），單擊「編輯」，更改任何內容（通常會添加一個空格），然後再次單擊「編輯」。這似乎強制Firebug刷新其顯示的DOM版本。 – devstruck 2012-04-05 17:10:34

雖然這不使用Firebug。我正在做一個'console.log'，它應該打印出當前節點**是**，不是嗎？ – 2012-04-05 17:29:34

啊，我的錯。 Kolink似乎很好地涵蓋了你真正的問題。 – devstruck 2012-04-05 18:55:07

還有就是value屬性和value屬性之間的差。當您在輸入框中鍵入時，您正在更改屬性，而不是屬性。該屬性與文檔加載時保持不變。除此之外，這意味着您可以使用elem.value = elem.getAttribute('value');將輸入框重置爲其默認值。

同樣，如果你有一個下拉<select>與具有selected屬性設置的選項之一，即使你選擇屬性仍然會存在不同的選項，即使selected屬性現在false。

這同樣適用於複選框和checked屬性。這同樣適用於disabled屬性以及其他一些內容。

來源

2012-04-05 17:38:08

我曾假設DOM的這些屬性是「單一來源的真相」，如何顯示這些元素，如果你想改變他們的行爲，你改變了屬性。看來，你告訴我的是，這些屬性只是JavaScript變量的初始值設定項，它隨後保存組件的狀態。那是對的嗎？ – 2012-04-05 18:20:43

或多或少，是的。有些屬性直接映射到屬性（特別是'style'），但大多數情況下應該使用屬性而不是屬性。 – 2012-04-05 18:28:43

它實際上正在改變DOM，而其他方式無論如何都是在文本區域出現的10個woulnd't。問題在於螢火蟲本身（在舊名單上），我不確定它是否仍然可用於新的。

要驗證，您可以使用Firefox的Web控制檯或Chrome的控制檯。

來源

2012-04-05 17:11:44 Starx

我正在使用Chrome的Inspect元素。和'console.log（$（「＃cow」））'。兩者都顯示DOM保持不變。他們都錯了嗎？ – 2012-04-05 17:31:20

在jQuery發生任何事情之前，DOM是完全加載的，所以從技術上說，插入DOM的數據不會被調試器看到。調試工具只能看到渲染的內容，所以你將無法操縱通過jQuery到達的「事後」數據。您可以將其視爲「帶外」或以某種方式欺騙DOM。 AJAX也一樣。如果使用.load（）等AJAX方法添加數據或頁面內容，則不會在DOM中看到它。

jQuery中的輸入框在textarea中有val（）方法 - 它是值屬性，它通常是html（）方法，textarea包含的內容。

來源

2012-04-05 17:12:07 rncrtr

雖然這不使用Firebug。我正在使用Chrome Inspect Element，我很確定它會顯示最新的DOM，就像我在問題中所說的那樣。我正在做一個'console.log'，它應該打印出當前節點**是**，不是嗎？兩者都表明它沒有變化。 – 2012-04-05 17:30:27

console.log只打印出當你調用console.log時的值，所以如果你的值賦值發生在那之後，它不會顯示出來。 – rncrtr 2012-04-05 17:32:07

我知道。我在執行'.val（...）'賦值後調用console.log。你可以看看JsFiddle（現在是正確的），看看你能否理解它？我已經使用JS大約兩年左右，並且創建了許多網站，所以我認爲（我希望！）我已經介紹了大部分微不足道的可能性= D – 2012-04-05 17:35:36

Jquery（input/textarea）.val（）：它如何在不改變DOM的情況下添加內容？

回答

相關問題