How can I add data params to an HTML string and get a string back?

Question

I got a string like this:

var select_string = '<select><option>1</option><option>2</option></select>';

I need to add some data params to select in this string and get this string back in order to get the following:

select_string = '<select data-param1="param1" data-param2="param2"><option>1</option><option>2</option></select>';

I tried to use jQuery functions like .html() or .text() but it did not work. Like this:

select_string = $(select_string).data('param1', 'param1').html() //or .text()

Any ideas how to make it work would be helpful. Thank you.

Not exactly a duplicate, but this question may have answers that are useful to your case. — Federico klez Culloca
– Federico klez Culloca, Commented Jan 13, 2020 at 15:20
Also related: stackoverflow.com/questions/7261619/jquery-data-vs-attr — isherwood
– isherwood, Commented Jan 13, 2020 at 15:22
I'd be curious why you're doing this operation in the first place. Shouldn't you be working with objects instead of strings? — isherwood
– isherwood, Commented Jan 13, 2020 at 15:23
See the documentation Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr. — R3tep
– R3tep, Commented Jan 13, 2020 at 15:24

Tân · Accepted Answer · 2020-01-13 15:20:28Z

6

You can use attr to add that attributes to the element

var select_string = '<select><option>1</option><option>2</option></select>';

var select = $(select_string).attr({
  'data-param1': 'param1',
  'data-param2': 'param2'
});

console.log(select.prop('outerHTML'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Since your attribute name starts with data-, if you want to get the value, you can use:

select.data('param1'); // param1
select.data('param2'); // param2

answered Jan 13, 2020 at 15:20

Tân

1

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

Comments

meneroush · Accepted Answer · 2020-01-13 15:23:48Z

1

EDIT: Titulum is right, jquery is not needed here.
But here is the working example usign jquery

var selectString = '<select><option>1</option><option>2</option></select>';
var $select = $(selectString);
$select.attr("prop_key","prop_value");
var selectChanged = $select.prop('outerHTML');

console.log(selectChanged)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Jan 13, 2020 at 15:23

meneroush

694 bronze badges

Comments

Titulum · Accepted Answer · 2020-01-13 15:23:41Z

0

You don't need jQuery for this:

const myElement = document.createElement('div');
myElement.innerHTML = "<select><option>1</option><option>2</option></select>";
const selectElement = myElement.getElementsByTagName("select")[0];
selectElement.setAttribute("data-param1", "param1");
selectElement.setAttribute("data-param2", "param2");

answered Jan 13, 2020 at 15:23

Titulum

11.6k13 gold badges54 silver badges91 bronze badges

Comments

agentile1990 · Accepted Answer · 2020-01-13 15:39:17Z

0

You could use indexOf and substr() to split it into 2 parts, insert your new text, and put it back together again.

var first_half = select_string.substr(0, select_string.indexOf('>'));

var second_half = select_string.substr(select_string.indexOf('>'));

select_string = first_half + ' data-param1=\"param1\" data-param2=\"param2\" ' + second_half;

answered Jan 13, 2020 at 15:39

agentile1990

161 silver badge3 bronze badges

Collectives™ on Stack Overflow

How can I add data params to an HTML string and get a string back?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related