Append valid json to html element

Question

I am trying to dynamically insert a valid json array into html, but I am running into an issue when the text has a quote, apostrophe, or other character that should be escaped. Here is an example to demonstrate the issue - let's say this is the HTML:

<p>text</p>

Then I want to dynamically generate JSON like so:

var x = '"in quotes"';
$( "p" ).after( '{"0":"' + x + '"}');

If var x were a value without any characters that need to be escaped the appended text would be valid JSON, but in this case there are quotes in the text being used.

The same result is achieved if using " instead of "

var x = '"in quotes"';
$( "p" ).after( '{"0":"' + x + '"}');

Here is a json fiddle with both examples

Is there a way to achieve the desired result which would look like this: {"0":""in quotes""} ?

Answer 1

I use & for &

Try this code.

var x = '"in quotes"'; $( "p" ).after( '{"0":"' + x + '"}');