Why jQuery’s . date() method does not update the data in the browser element inspect

Question

Can anyone explain why the method .date() of jQuery does not update (visually) the data shown when using the "inspect element" of the browser?

The data is there because it is possible to use them

$(function() {
	var $results = $('#results'),
		$users = $('#users'),
		$displayData = $('#display-data');

	var users = ['Wagner', 'waghcwb'];

	// seta os dados
	$users.data('users', users);

	$displayData.click(function() {
		$results.fadeIn().find('.users').text( users.join(', ') );
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="users">inspecionar</div>
<button id="display-data">ver resultados</button>
<div id="results" style="display:none">usuários: <span class="users"></span></div>

However, it is not possible to see the data in the element itself when inspecting in the browser

However, note that when using the method .attr() it is possible to view the data

$(function() {
	var $results = $('#results'),
		$users = $('#users'),
		$displayData = $('#display-data');

	var users = ['Wagner', 'waghcwb'];

	// seta os dados
	$users.attr('data-users', users);

	$displayData.click(function() {
		$results.fadeIn().find('.users').text( users.join(', ') );
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="users">inspecionar</div>
<button id="display-data">ver resultados</button>
<div id="results" style="display:none">usuários: <span class="users"></span></div>

@Edit:

Another detail I forgot to mention when formulating the question, is that it is also not possible to use jQuery selectors to select elements with certain data on data, for example:

$('.element[data-users]');

This does not return the element with the attribute data-users...