Add attributes as String to DOM element in jQuery

Question

So I have a list of attributes stored as a string variable. I want to add that variable to a <div>. I'm currently at a loss. What I have is as follows:

HTML:

<div></div>

JS:

var attributes = 'data-id="123" data-type="content" data-order="1"'

Desired Output:

<div data-id="123" data-type="content" data-order="1"></div>

Since your attributes are stored as a string, you need to first extract your data attributes and their values, loop through them, and then add them to your div, which you can do with jQuery's .data() method. — WillardSolutions
– WillardSolutions, Commented Feb 15, 2017 at 17:35

inoabrian · Accepted Answer · 2017-02-15 17:39:25Z

2

This should work.

var div = document.getElementById('YOUR_ID');
var attributes = 'data-id="123" data-type="content" data-order="1"'
attributes.split(' ').forEach((attr) => {
   div.setAttribute(attr.split('=')[0], attr.split('=')[1]);
});

answered Feb 15, 2017 at 17:39

inoabrian

3,8101 gold badge21 silver badges27 bronze badges

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

3 Comments

NotABlueWhale Over a year ago

You would need to get rid of the double quotes in the data values though.

John Dvorak Over a year ago

This breaks if there's a space inside an attribute value.

DigitalMC Over a year ago

This also worked for my use, Thanks for contributing. The others were just a little more bulletproof.

Ja9ad335h · Accepted Answer · 2017-02-15 18:03:55Z

2

split the attributes string by spaces (but not spaces inside the quotes)

var div = document.getElementById('test');
var attributes = 'data-id="123" data-type="content new" data-order="1"';
var arr = attributes.match(/[^\s="']+|"([^"]*)"|'([^']*)'/g);

for (var i = 0; i < arr.length; i += 2)
  div.setAttribute(arr[i], arr[i + 1].replace(/"/g, ''));

<div id="test">test</div>

answered Feb 15, 2017 at 18:03

Ja9ad335h

5,0652 gold badges23 silver badges29 bronze badges

Comments

Sagar V · Accepted Answer · 2017-02-15 17:43:32Z

1

var attributes = 'data-id="123" data-type="content" data-order="1"';
 attributes=attributes.split(" ");
i=0;
var d=document.getElementsByTagName('div')[0];
while (i<attributes.length){
d.setAttribute(attributes[i].split('=')[0],attributes[i].split('=')[1].replace(/\"/g,""));
i++;
}

alert(d.getAttribute("data-id"));

answered Feb 15, 2017 at 17:43

Sagar V

12.5k8 gold badges46 silver badges71 bronze badges

Comments

Nenad Vracar · Accepted Answer · 2017-02-15 17:42:02Z

1

You can use split() to split attributes on key-value and then use forEach() loop to add them to element.

var attributes = 'data-id="123" data-type="content" data-order="1"'.replace(/"/g, '').split(/=| /)
attributes.forEach(function(e, i) {
  if(i % 2 == 0) $('div').attr(attributes[i], attributes[i + 1])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>DIv</div>

answered Feb 15, 2017 at 17:42

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

3 Comments

Nenad Vracar Over a year ago

On every even number do something.

DigitalMC Over a year ago

Right, but why only even numbers?

Nenad Vracar Over a year ago

In fist case element from attributes with i or 0 is key and i + 1 or 1 is value, etc...

Collectives™ on Stack Overflow

Add attributes as String to DOM element in jQuery

4 Answers 4

3 Comments

Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

3 Comments

Related