为什么Google Chrome开发人员工具->元素无法反映Javascript在DOM中所做的某些更改？

Question

我有以下表格：

<form>
    <input type = "text" id = "test" class = 'test'>
</form>

以及以下Javascript代码：

<script>
    $(function(){
        $('#test').addClass('thereIsNoSpoon').val('blah');
    })
</script>

当我打开页面并查看Chrome的开发人员工具->元素时，我可以在输入元素上看到“ thereIsNoSpoon”类是可见的（Chrome注意到了更改，并为我显示了该更改）它不反映“值”属性的变化。 也就是说，我可以在页面上看到此更改，但在开发工具中看不到。

我有两个问题-这是为什么，以及反映/不反映对DOM所做更改的背后规则是什么？

Answer 1

jQuery $().val('some_value')设置元素的value属性。它不会更改元素的value属性。使用$().attr('value','some_value')

检查此SO链接