Add a string of html attributes to a html element

Question

I have a string of attributes written in valid html, and I want to put those attributes on an actual html element (not a html string of an element).

For example, I have the string of attributes in the sensibly named attributesStr variable, and I want to add those attributes to the #htmlElement div.

var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.

// Your special code to add the attributes to `#htmlElement` goes here.

<div id="htmlElement">
    The HTML element!
</div>

After the JQuery / JavaScript code is run, #htmlElement should look like:

<div id="htmlElement" class='regularClass' title='Title... with spaces!' style='color: red; font-weight: bold;' data-attributenovalue>
    The HTML element!
</div>

How can I do this in JavaScript or Jquery?

First attempt: I was thinking I could do this by .split()ing attributesStr on spaces, and then splitting each individual attribute key value pair on the =, and then iterating that array and adding each key value pair with JQuery's .prop() or .attr(), but this wouldn't work for two reasons:

It would fail on the style and title attributes because they have spaces.
It might fail on the attributes with no value.

attributesStr.match(/[^\s=]+(=['][^']*['])?/g) this will get you the first split — tallberg
– tallberg, Commented Oct 4, 2017 at 13:17
You're making this harder than it needs to be by hacking around the pre-built string. Can you not apply the styles at the point you build that string? Or even create an object with those values to be applied later? — Rory McCrossan
– Rory McCrossan, Commented Oct 4, 2017 at 13:17
@RoryMcCrossan I've already found a different solution to my original problem, I was just curious if there was a way to do this in JS/JQuery :) — Ethan
– Ethan, Commented Oct 4, 2017 at 13:19
@tallberg Please feel free to post an answer if you think you have a solution that works :) — Ethan
– Ethan, Commented Oct 4, 2017 at 13:20
Sure, there's lots of ways to do anything, but most of them aren't the best way for a variety of reasons. — Rory McCrossan
– Rory McCrossan, Commented Oct 4, 2017 at 13:20

Namaskar · Accepted Answer · 2017-10-04 17:26:55Z

5

Take the attributesStr and insert it into the existing outerHTML. To achieve this, you need to reconstruct the node by removing the existing tag, injecting the string, and putting back the rest of the html.

var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.

var element = document.getElementById('htmlElement');

var tag = element.tagName;

element.outerHTML = '<' + tag + attributesStr + element.outerHTML.substring(tag.length + 1);

<div id="htmlElement">
  The HTML element!
</div>

edited Oct 4, 2017 at 17:26

answered Oct 4, 2017 at 13:35

Namaskar

2,1071 gold badge16 silver badges29 bronze badges

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

2 Comments

Ethan Over a year ago

Wow! That really works, however if you inspect the element you'll find that it adds a new element inside the old #htmlElement. Try messing around with outerHtml to fix that.

Namaskar Over a year ago

yeah, silly jQuery's html(). might as well not use it at all

rahul patel · Accepted Answer · 2017-10-04 13:29:20Z

2

You can use .attr() to do this in jquery. Here is the working snippet.

click here for attr() usage

$(document).ready(function(){
$("#htmlElement").attr("class", "regularClass");
$("#htmlElement").attr("title", "Title... with spaces!");
$("#htmlElement").attr("style", "color: red; font-weight: bold");
$("#htmlElement").attr("data-attributenovalue",true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

answered Oct 4, 2017 at 13:29

rahul patel

3621 gold badge2 silver badges15 bronze badges

3 Comments

Ethan Over a year ago

I have to use a string with all the attributes, I absolutely can't modify the source format of that string. I included that attributesStr variable as an example of what the string looks like.

rahul patel Over a year ago

You want to use the string with all attributes instead of adding it separately using attr right?

Ethan Over a year ago

Yup, works perfectly :) Thanks for answering though.

Naruto Dev · Accepted Answer · 2017-10-04 13:39:16Z

1

Try this:

var dummHTML = $("<div "+attributesStr+"></div>");   
$.each(dummHTML[0].attributes, function(i,v){
 $('#htmlElement').attr(v.nodeName,v.nodeValue);
});

answered Oct 4, 2017 at 13:39

Naruto Dev

1,0035 silver badges11 bronze badges

Comments

flacoloco · Accepted Answer · 2017-10-04 13:42:16Z

Maybe not the best option but if its required to use the full string:

The idea is: take the content of the element, then remove it and create it again with the new attributes:

var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.

// Your special code to add the attributes to `#htmlElement` goes here.
var $innerHTML = $("#htmlElement").html()
$("#htmlElement").remove()
var $newElement = "<div id='htmlElement' " + attributesStr + ">" + $innerHTML + "</div>" 

$("body").after($newElement)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

Renzo Calla · Accepted Answer · 2017-10-04 13:26:44Z

0

Why not separating your string with ','

var attributesStr = "";
attributesStr = attributesStr + " class='regularClass'," ; // Needs to handle key value attributes.
attributesStr = attributesStr +" title='Title... with spaces!',"; // And attributes with spaces.
attributesStr = attributesStr +" style='color: red; font-weight: bold;',"; // And style with multiple properties.
attributesStr = attributesStr +" data-attributenovalue,"; // And attributes with no value.

var array = attributesStr.split(',');

array.forEach(function(item){
 property = item.split('=');
 $('#htmlElement').attr(property[0].trim());
 if(property[1]) $('#htmlElement').attr(property[0].trim(), property[1].trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

answered Oct 4, 2017 at 13:26

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

1 Comment

Ethan Over a year ago

I have to use a string with all the attributes, I absolutely can't modify the source format of that string. I included that attributesStr variable as an example of what the string looks like.

tallberg · Accepted Answer · 2017-10-04 13:27:07Z

0

This will get you the first split

attributesStr.match(/[^\s=]+(=['][^']*['])?/g)

result:

["class='regularClass'", "title='Title... with spaces!'", "style='color: red; font-weight: bold;'", "data-attributenovalue"]

Then in an foreach you can handle the attrs as you suggested.

answered Oct 4, 2017 at 13:27

tallberg

4794 silver badges13 bronze badges

1 Comment

Ethan Over a year ago

Ok, this looks like it might work. Could you include the rest of the code to handle the attrs? Then it would indisputably work.

Collectives™ on Stack Overflow

Add a string of html attributes to a html element

6 Answers 6

2 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related