Сохранять данные при конвертации объекта jQuery в html

Question

У меня есть HTML-элемент, созданный в JavaScript.
Этот элемент должен также сохранить один объект как атрибут data-, а затем преобразоваться в чистый HTML.
Моя проблема в том, что атрибут data- исчезает после доступа к prop("outerHTML").

Вот что я имею в виду:

let obj = $("<i>TEST</i>");
obj.data("key", "value");
let html = obj.prop("outerHTML");
console.log("DATA: " + obj.data("key")); //gives value
console.log("HTML: " + html); //gives <i>TEST</i>   

Я также пытался напрямую ввести атрибут data-, но кавычки создают проблемы.

Я пытался:

let dataJSON = JSON.stringify(data);
let obj = $('<i data-test=' + dataJSON + '</i>'

Моя цель - создать ячейку dataTable, которая должна содержать некоторые данные для обработки кликов по ней. Все выглядит так:

columns: [
   data: "notice_id", render: function (data, type, row) {
      let html = $('<i class="edit-button fas fa-pencil-alt"></i>');
      html.data("notice", row);
      return html.prop("outerHTML");
      }]

редактировать:
Мне следовало написать, что я знаю, что jQuery на самом деле не меняет атрибут data-. Я почему-то надеялся, что он все равно добавит его, когда получу доступ к внешнему html.
Тем не менее, связанный вопрос на самом деле не дает ответа о том, как сделать его лучше (за исключением того, что он написан напрямую, что вызывает проблемы, отличные от простых строковых данных).

Answer 1

Вы можете использовать обратный вызов createdCell, если вам нужна дополнительная постобработка, и обогатить <i> с помощью data() там:

columns: [{
  data: "notice_id", 
  render: function(data, type, row) {
    //no need for constructing jQuery instances here
    return '<i class="edit-button fas fa-pencil-alt"></i>'
  },
  createdCell: function(td, cellData, rowData, row, col) {
    $('i', td).data('notice', rowData)
  }
}]