[解決済み】HTML要素にデータ属性を設定する方法

質問

divに属性 data-myval = "10" . その値を更新したいのですが、その際に div.data('myval',20) ? を使用する必要があるのでしょうか？ div.attr('data-myval','20') のみですか？

HTML5とjQueryを混同しているのでしょうか？アドバイスお願いします。ありがとうございます。

編集：更新 div.data('myval')=20 から div.data('myval',20) が、まだHTMLが更新されない。

どうすればいいですか？

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

デモ

参考

参考文献より

jQuery 自身が .data() メソッドを使用して 'events' および 'handle' という名前で情報を保存し、アンダースコア ('_') で始まる任意のデータ名を内部用に予約しています。

注意すべきは、jQueryの data() は変更されません。 data 属性を使用することができます。

そのため、変更する必要がある場合は data 属性を使用する必要があります。 .attr() の代わりに

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

JS:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

参照 このデモ