Can you set multiple attributes with the DOM's setAttribute function?

Question

Let's say I wanted to create an input element using the DOM. Instead of doing something like this

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

Is there a DRYer way to write these three lines of code into one line.

I know you could do something like this

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

The problem is that is only helpful if you have a boatload of attributes you need to add. If you only have two or three, this is even less DRY.

Is there anyway I can dry up this code?

Answer 1

I personally think you're taking DRY too far (the three statements do different things, so I don't see how it's not DRY.) But if you must abstract it, just write a function to do it:

 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);

Answer 2

在 jQuery 中，您可以执行以下操作：

var $input = $("<input>", {class: "my-class", type: "checkbox", checked:"checked"});

Answer 3

Yes, You can do using Jquery.

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

Answer 4

Element.setAttribute sets a single attribute, but you could easily write a helper function:

function setAttributes(elements, attributes) {
  Object.keys(attributes).forEach(function(name) {
    element.setAttribute(name, attributes[name]);
  })
}

Usage:

var input = document.createElement("input");
setAttributes(input, {
  class: "my-class",
  type: "checkbox",
  checked: "checked"
})

As other answers say, you could also use $.attr . That's great if your project already uses jQuery. If it doesn't, I'd use this function rather than adding a fairly heavyweight dependency for a simple task.

Answer 5

var opt = {"class":"my-class", "type": "checkbox", "checked":"checked"};

Object.keys(opt).forEach( function(key){ input.setAttribute(key,opt[key]); } );

Answer 6

An elegant approach without frameworks or libraries (or even helper functions) is to use:

Object.assign(element, attributes);

where the second parameter, attributes , is an object literal in which:

• the keys represent attribute properties
• the values represent attribute values.

This means that:

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

can be written as:

const input = document.createElement("input");
Object.assign(input, {class: 'my-class', type: 'checkbox', checked: 'checked'});

or, if you prefer:

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

Object.assign(input, {
  class: 'my-class',
  type: 'checkbox',
  checked: 'checked'
});

---

Further Reading:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign