How do I add multiple atrributes to an element in JavaScript?

Question

A string can contain attributes in the form like this:

let attr = ' min="0" step="5" max="100" ';

or

let attr = ' min="2019-12-25T19:30" ';

etc.

Is there a function (either JS or jQuery) to assign these attributes to a HTML element?

Similar to setAttribute(name, value); but for multiple attributes.

Why can't you just call the function multiple times? if those are different attributes calling it multiple times should work, if they are the same attributes, just append the new value to old value and update it then. — Krzysztof Krzeszewski
– Krzysztof Krzeszewski, Commented Dec 7, 2021 at 10:47
let ele = document.getElementsByClassName("user-info")[0]; ele.min = "min"; console.log(ele.min); But your custom attrributes will not be visible in the tags, i guess. — Himanshu Singh
– Himanshu Singh, Commented Dec 7, 2021 at 10:49
Not unless you want to (re-)create the element's HTML code yourself in string form, and then let the browser parse it. It would probably make more sense to take your string value apart into name=value pairs first (via regular expression matching), and then loop over the result to use setAttribute with each one individually. — C3roe
– C3roe, Commented Dec 7, 2021 at 10:49
The element doesn't contain any attributes when it is created. Therefore there's no need to check if it exists or not. — smolo
– smolo, Commented Dec 7, 2021 at 10:51
Related: Setting multiple attributes for an element at once with JavaScript — Ivar
– Ivar, Commented Dec 7, 2021 at 10:51

Saeed Shamloo · Accepted Answer · 2021-12-07 11:07:38Z

1

There isn't any javascript method to do it, but you can convert your string to array and call setAttribute on the target element on every iterate of the array. like this:

let el = document.getElementById("targetId")  
let attrs = ' min="0" step="5" max="100" '.trim().replace(/\"/g,"").split(" ")
attrs.forEach(attr => {
  const [key,value] = attr.split('=');
  el.setAttribute(key,value)
})

answered Dec 7, 2021 at 11:07

Saeed Shamloo

6,6021 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aviv Ben Yosef · Accepted Answer · 2021-12-07 10:56:23Z

0

Please look at the answer at the following Setting multiple attributes for an element at once with JavaScript

Quoting from there, you can use the following helper function

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

And call it like so:

setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...});

answered Dec 7, 2021 at 10:56

Aviv Ben Yosef

111 bronze badge

Collectives™ on Stack Overflow

How do I add multiple atrributes to an element in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related