@andyb's accepted answer has a small bug. Further to my comment on his post above...
For this HTML:
<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>
You need to access the attribute like this:
$('#foo').attr('data-helptext', 'Testing 123');
but the data method like this:
$('#foo').data('helptext', 'Testing 123');
The fix above for the .data() method will prevent "undefined" and the data value will be updated (while the HTML will not)
The point of the "data" attribute is to bind (or "link") a value with the element. Very similar to the onclick="alert('do_something')"
attribute, which binds an action to the element... the text is useless you just want the action to work when they click the element.
Once the data or action is bound to the element, there is usually* no need to update the HTML, only the data or method, since that is what your application (JavaScript) would use. Performance wise, I don't see why you would want to also update the HTML anyway, no one sees the html attribute (except in Firebug or other consoles).
One way you might want to think about it: The HTML (along with attributes) are just text. The data, functions, objects, etc that are used by JavaScript exist on a separate plane. Only when JavaScript is instructed to do so, it will read or update the HTML text, but all the data and functionality you create with JavaScript are acting completely separate from the HTML text/attributes you see in your Firebug (or other) console.
*I put emphasis on usually because if you have a case where you need to preserve and export HTML (e.g. some kind of micro format/data aware text editor) where the HTML will load fresh on another page, then maybe you need the HTML updated too.