Как я могу добавить параметры данных в строку HTML и получить строку обратно?

Question

Я получил string вот так:

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

Мне нужно добавить несколько data параметров к select в этой строке и получить эту строку обратно, чтобы получить следующее:

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

Я пытался использовать jQuery функции, такие как .html() или .text(), но это не сработало. Вот так:

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

Любые идеи, как заставить это работать, были бы полезны. Спасибо.

Answer 1

Вы можете использовать attr, чтобы добавить эти атрибуты к элементу

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>

Поскольку имя вашего атрибута начинается с data-, если вы хотите получить значение, вы можете использовать:

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

Answer 2

РЕДАКТИРОВАТЬ : Титул прав, jquery здесь не нужен.
Но вот рабочий пример 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>

Answer 3

Вы можете использовать indexOf и substr(), чтобы разделить его на 2 части, вставить новый текст и снова соединить.

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;

Answer 4

Вам не нужно jQuery для этого:

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