如何使用原生JavaScript为元素添加无值的空白data属性？

可以做到，推荐两种原生方案，完全不需要使用innerHTML这类方法：

方法一：使用toggleAttribute()（最简方案） #

toggleAttribute()方法在目标属性不存在时，会直接添加该属性且不附带任何值，完全符合需求：

const div = document.createElement('div');
// 添加无值的data属性
div.toggleAttribute('data-boolean-attribute');

此时生成的元素结构为：

<div data-boolean-attribute></div>

方法二：创建并添加属性节点 #

通过createAttribute()创建属性节点，再用setAttributeNode()挂载到元素上，同样能得到无值属性：

const div = document.createElement('div');
const attr = document.createAttribute('data-boolean-attribute');
div.setAttributeNode(attr);

该方式生成的元素结构与方法一完全一致。

为什么其他常见方式达不到效果？ #

• 用setAttribute('data-boolean-attribute', null/undefined)：参数会被强制转为字符串，最终得到data-boolean-attribute="null"或data-boolean-attribute="undefined"。
• 用setAttribute('data-boolean-attribute', '')：会生成带空字符串值的属性，即data-boolean-attribute=""。
• 用dataset属性：比如div.dataset.booleanAttribute = null，同样会把值转为字符串，最终得到data-boolean-attribute="null"。

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