Why is jQuery adding backslash "\" characters to my string?

I'm using jQuery to replace the contents of an element with a string, which contains some elements. The following is the code I'm using to create $value, the string:

var value =  '<span class="fn">' + $("#fn_").val() + '</span>';
$("input", this).val(value);

However, what actually gets outputted has backspace characters all through it, like this:

<span class="\&quot;fn\&quot;">Name</span>

I'm assuming this is probably a stupid mistake on my part, but not sure what I'm doing wrong? Appreciate any advice!

EDIT

For clarity, here's the full code, I'm creating a custom input type for jEditable that allows me to inline edit a vcard.

$.editable.addInputType('person', {
element : function(settings, original) {     
    var fn  = $('<input id="fn_"/>');
    var bday  = $('<input id="bd开发者_高级运维ay_" />');
    var wday  = $('<input id="wday_" />');
    var dday  = $('<input id="dday_" />');
    var spouse  = $('<input id="spouse_" />');

    $(this).append(fn);
    $(this).append(bday);
    $(this).append(wday);
    $(this).append(dday);
    $(this).append(spouse);

    /* Hidden input to store value which is submitted to server. */
    var hidden = $('<input type="hidden">');
    $(this).append(hidden);
    return(hidden);
},

content : function(string, settings, original) {
        var $data = $(string);

        var data = {};
        $data.each(function () {
            var $t = $(this);
            data[$t.attr('class')] = {
                                   class: $t.attr('class'),
                                   value: $t.text()};
        });

        alert(data.length);

        $("#fn_", this).val('Name');
        $("#bday_", this).val('Born');
        $("#wday_", this).val('Married');
        $("#dday_", this).val('Died');
        $("#spouse_", this).val('Spouse');
    },

    submit: function (settings, original) {
    var value =  "<span class=fn>" + $("#fn_").val() + '</span>' + '<span class=spouse>' + $("#spouse_").val() + '</span>' + '<span class=bday>' + $("#bday_").val() + '</span>' + '<span class=wday>' + $("#wday_").val() + '</span>' +'<span class=dday>' + $("#dday_").val() + '</span>';
        $("input", this).val(value);
    }

});

Hmm I seem to have got this working by using

'<span class=fn>'

instead of

'<span class="fn">'

i.e. removing the quotes from around the class name. For some reason the quotes are being put back in correctly in the output, however I'm not able to use multiple classes.

If you are trying to set the HTML that is inside a span, one correct way to do it is:

.empty().append($('<span class="fn"/>').text($("#fn_").val()))

Or if you want to replace the element entirely:

.replaceWith($('<span class="fn"/>').text($("#fn_").val()))

Or if you just want to remove class vcard, add class fn, and set the contents:

.removeClass('vcard').addClass('fn').text($("#fn_").val())

This ensures that the value from the textbox is properly HTML-escaped before it is inserted into the span element. It's not correct to use .val to set the HTML contents of an element; use .html for that, although it is not necessary in this case.

Did you know that your submit function is executed before sending data to the server (take a look at Jeditable source), this means all your "spans" are sent to the server, so what is probably encoding your elements is your server-side script.

Cheers.