javascript - 如何向现有的 html 元素或 div 添加新的数据属性？

Question

我想弄清楚是否可以向现有的 html 元素添加新的数据属性。例如:

<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>