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.