I have the following form:
<form>
<input type = "text" id = "test" class = 'test'>
</form>
And the following Javascript code:
<script>
$(function(){
$('#test').addClass('thereIsNoSpoon').val('blah');
})
</script>
When I open the page, and look at Chrome's developer tools -> elements, I can see on the input element, that the class 'thereIsNoSpoon' is visible (Chrome noticed the change, and displays it for me), and in the same moment it does not reflect the change in 'value' attribute. That is, I can see this change on the page, but not in Dev Tools.
I have two questions - why is that and what are the rules behind reflecting/not reflecting changes made to DOM.