向元素添加数据属性在第一次尝试时不起作用

向元素添加数据属性在第一次尝试时不起作用，可能是由于以下几个原因：

DOM元素尚未加载：如果你在文档加载完成之前尝试添加数据属性，那么这个操作可能不会生效。确保你的JavaScript代码在DOM元素加载完成之后执行。
选择器问题：可能是因为选择器没有正确选中目标元素。检查你的选择器是否正确无误。
JavaScript执行顺序：如果你的JavaScript代码在HTML元素之前执行，那么它可能找不到对应的元素。
浏览器缓存：有时候浏览器缓存可能会导致JavaScript代码没有按预期执行。

解决方法

确保DOM加载完成：使用DOMContentLoaded事件来确保DOM完全加载后再执行你的JavaScript代码。
确保DOM加载完成：使用DOMContentLoaded事件来确保DOM完全加载后再执行你的JavaScript代码。
检查选择器：确保你的选择器正确无误。例如，如果你使用的是ID选择器，确保元素的ID是唯一的。
检查选择器：确保你的选择器正确无误。例如，如果你使用的是ID选择器，确保元素的ID是唯一的。
调整JavaScript执行顺序：确保你的JavaScript代码在HTML元素之后执行。你可以将JavaScript代码放在<body>标签的底部，或者使用上述的DOMContentLoaded事件。
清除浏览器缓存：有时候浏览器缓存可能会导致问题。尝试清除浏览器缓存或使用无痕模式来运行你的网页。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myElement">Hello World</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var element = document.getElementById('myElement');
            if (element) {
                element.setAttribute('data-custom-attribute', 'value');
                console.log(element.getAttribute('data-custom-attribute')); // 输出: value
            }
        });
    </script>
</body>
</html>