Adding a data attribute(with special characters) to a dom element using jquery

I am trying to add a data attribute to a html element. The data attribute(data-description) can contain special characters like apostrope.

InsertHtml = InsertHtml + '<tr id="DashboardRow0" data-description=\'' + JSON.stringify(data[0])+ '\'><td>' + </td></tr>';
htmlElement.append(InsertHtml);

The code to access this data is given below...

var $row = $("#DashboardRow0");
var jsonData = eval('(' + $row.attr('data-description') + ')');

But the problem is...If there is a single apostrophe within JSON.stringify(data[0]) data..the browser replaces it with a " effectively terminati开发者_如何学编程ng the string.

Is there any know solution to adding data attributes with special characters to nodes?

---

try to escape data before stringify

data[0].myProblemField = escape(data[0].myProblemField)
JSON.stringify(data[0])

<edit>
or better

 for(var prop in data[0]) if(typeof(data[0][prop]) == "string") 
   data[0][prop] = escape(data[0][prop]);

</edit>

and afterwards

var jsonData = eval('(' + $row.attr('data-description') + ')');
jsonData.myProblemField = unescape(data[0].myProblemField)

---

Not entirely sure whether this'll help you (i.e. whether this is all happening in the same document), but have you considered using jQuery's .data()? It won't have these problems, as the data is stored as a variable.

---

If you write in html

<tr id="some &quot; "><td>...</td></tr>

You get

<tr id="some " "><td>...</td></tr>

in browser.