如何用JavaScript/jQuery为HTML元素添加自定义data属性

首先明确：prepend方法完全不适合这个需求——它的作用是往元素的内部开头插入文本、子元素这类内容，和操作元素标签上的属性完全是两码事。

要给div添加自定义的data属性，有两种简单可靠的JavaScript方法：

方法1：使用dataset属性（HTML5标准推荐） #

dataset是元素对象的内置属性，专门用来操作以data-开头的自定义属性，命名时用驼峰写法对应属性名里的连字符：

// 选中目标div
const targetDiv = document.querySelector('.selection');
// 设置data-use-type属性
targetDiv.dataset.useType = 'STRING';

执行后，目标div会自动带上data-use-type="STRING"属性，和你想要的效果完全一致。

方法2：使用setAttribute方法 #

如果需要更直接地指定属性名，可以用这个方法，直接传入完整的属性名和对应值：

const targetDiv = document.querySelector('.selection');
targetDiv.setAttribute('data-use-type', 'STRING');

这两种方法都能直接修改元素的标签属性，不需要操作元素内部的HTML内容，完美解决你的问题。

内容的提问来源于stack exchange，提问作者Gustavo Pizzo