如何将新的data属性添加到现有的html元素或div？

Question

我想弄清楚是否有可能向现有的html元素添加新的data属性。例如：

<button class="confirm-button" data-id=560>Click Me</button>

我希望能够使用类似jquery的新数据属性

<button class="confirm-button" data-text="justaddedattr" data-id=560>Click Me</button>

Answer 1

您可以尝试使用jQuery的.attr()

$('.confirm-button').attr('data-text', 'justaddedattr');
console.log($('.confirm-button').data('text'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="confirm-button" data-id=560>Click Me</button>

您也可以尝试.data()

$('.confirm-button').data('text', 'justaddedattr');
console.log($('.confirm-button').data('text'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="confirm-button" data-id=560>Click Me</button>