可以使用 DOM 的 setAttribute 函数设置多个属性吗？

Question

假设我想使用 DOM 创建一个输入元素。而不是做这样的事情

var input = document.createElement("input");
input.setAttribute("class", "my-class");
input.setAttribute("type", "checkbox");
input.setAttribute("checked", "checked");

有没有DRYer的方法可以把这三行代码写成一行。

我知道你可以做这样的事情

var attributes = ["class", "type", "checked"];
var values = ["my-class", "checkbox", "checked"];

for (var i = 0; i < attributes.length; i++) {
  input.setAttribute(attributes[i], values[i])
end

问题是，只有当您需要添加大量属性时，它才有用。如果你只有两三个，这就更不干了。

无论如何我可以干掉这段代码吗？

原文由 Richard Hamilton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，您可以使用 Jquery。

 $(input).attr(
{
  "data-test-1": num1,
  "data-test-2": num2
});

原文由 Kaushik Thanki 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我个人认为你把 DRY 做得太过分了（这三个语句做不同的事情，所以我不明白它为什么不是 DRY。）但是如果你必须抽象它，只需编写一个函数来做到这一点：

 var input = document.createElement("input");

function setAttributes(el, options) {
   Object.keys(options).forEach(function(attr) {
     el.setAttribute(attr, options[attr]);
   })
}

setAttributes(input, {"class": "my-class", "type": "checkbox", "checked": "checked"});

console.log(input);

原文由 Mathletics 发布，翻译遵循 CC BY-SA 3.0 许可协议