如何在JavaScript动态生成的DOM元素中添加data-index属性

嘿，这个问题其实不难解决，有两种常用的方法可以给你动态创建的input元素添加data-index属性，我给你详细说明下：

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

HTML5提供了dataset对象来方便操作以data-开头的自定义属性，你只需要直接给元素的dataset对象赋值即可，data-index对应的是dataset.index（驼峰命名规则）：

const serialInput = createDomElement("input", "form-control")
serialInput.name ="serial " + device_id
serialInput.placeholder="10 characters"
serialInput.required = true
serialInput.className ="form-control"
serialInput.minLength = "10"
serialInput.maxLength = "10"

// 添加data-index属性，把x替换成你的索引值（比如数字、循环变量）
serialInput.dataset.index = x;

方法2：使用setAttribute()方法 #

这是更通用的DOM属性操作方法，适合所有自定义属性，不管是不是data-前缀的：

const serialInput = createDomElement("input", "form-control")
serialInput.name ="serial " + device_id
serialInput.placeholder="10 characters"
serialInput.required = true
serialInput.className ="form-control"
serialInput.minLength = "10"
serialInput.maxLength = "10"

// 添加data-index属性，把x替换成你的索引值
serialInput.setAttribute('data-index', x);

小提示 #

• 记得把代码里的x替换成你实际需要的索引值，比如循环中的计数器变量i，或者固定的数字（比如"0"）。
• 两种方法效果完全一致，选你觉得顺手的就行，dataset更符合HTML5的规范，可读性更强。

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