Escaping double double quotes in html attributes in Javascript

Question

I use bootstrap and create html nodes which contain popovers with jQuery. The popovers contain html so that I have problems with the quotes and escaping:

var content = '<input type="text" ng-model="test1" />';
var txt =     '<button type="button" data-container="body" ' +
                     'data-toggle="popover" title="myTitle" data-html="true" '+
                     'data-content="'+content+'">Click</button>';

How can I escape the double quotes inside the attributes => html-attributes? in the data-content attribute correctly?

Edit: I compile the code with angular so that it should also work with it.

Answer 1

If it is HTML, you can use HTML entities to escape characters that might be interpreted otherwise. For example, " will be displayed as " in HTML attributes:

var content = '<input type=&quot;text&quot; ng-model=&quot;test1&quot; />';

Proof of concept: http://jsfiddle.net/teddyrised/5X5Ye/

Refer to W3C's HTML entities chart for more information: http://dev.w3.org/html5/html-author/charref