Javascript - JQuery append function and using quotes

Question

I have a large append function in my code. In this append function, i am populating an textarea with some text. In this text, I can also have quotes (") and this is causing problems because my append function will interprete those quotes as breaking quotes, and it should not.

Do you have an ideao on how to escape those quotes? Thank you.

EDIT: Here is my append function:

$('#add_affiliation').append(
            '<div id="affiliation_'+affiliation_id+'title" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">'+
                '<span id="affiliation_title'+affiliation_id+'" class="ui-dialog-title">Affiliation '+affiliation_id+'</span>'+
                '<a href="#delete_affiliation" id="delete_affiliation_'+affiliation_id+'" onclick="deleteAffiliation(\''+affiliation_id+'\');" >'+
                    '<img style="float:right" src="/css/images/delete_affiliation.png" />'+
                '</a>'+
            '</div>'+
            '<div id="affiliation_'+affiliation_id+'content" class="ui-dialog-content ui-widget-content">'+
                '<label for="add_affiliations"></label>'+
                '<div id="add_affiliation_'+affiliation_id+'" style="overflow: hidden" class="element">'+
                    '<table id="affiliation_table" style="table-layout:fixed;">'+
                    '<tbody>'+
                        '<tr>'+
                            '<td style="height:30px; width:65px;" align="right"><font size="2"><b>N°:</b></font></td>'+
                            '<td align="left" style="height:30px; width:700px;">'+
                                '<input type="text" name="number"; id="number'+affiliation_id+'"; value="'+article_affiliations[i].number+'" />'+
                            '</td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td style="height:30px; width:65px;" align="right"><font size="2"><b>Affiliation:</b></font></td>'+
                            '<td align="left" style="height:30px; width:700px;">'+
                                '<input type="text" name="affiliation" id="affiliation'+affiliation_id+'" value="'+article_affiliations[i].name+'" style="width: 100%;" />'+
                            '</td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td style="height:30px; width:65px;" align="right"><font size="2"><b>Country:</b></font></td>'+
                            '<td align="left" style="height:30px; width:700px;">'+
                            '<select id="country'+affiliation_id+'";></select>'+
                            '<img style="vertical-align:bottom; " src="/css/images/Warning.png"; id="country_warning'+affiliation_id+'"; width="20px"; height="20px"; alt="-"; />'+
                            '<span id="country_warning_message'+affiliation_id+'" style="visibility:hidden; color:red;"></span>'+
                            '</td>'+
                        '</tr>'+
                    '</tbody>'+
                '</table>'+
            '</div>'+
        '</div>');

Answer 1

I would basically do the regular append without giving any values and then use .find(selector).val(value) on each element:

$('<div id="affiliation_'+affiliation_id+'title" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">'+
            '<span id="affiliation_title'+affiliation_id+'" class="ui-dialog-title">Affiliation '+affiliation_id+'</span>'+
            '<a href="#delete_affiliation" id="delete_affiliation_'+affiliation_id+'" onclick="deleteAffiliation(\''+affiliation_id+'\');" >'+
                '<img style="float:right" src="/css/images/delete_affiliation.png" />'+
            '</a>'+
        '</div>'+
        '<div id="affiliation_'+affiliation_id+'content" class="ui-dialog-content ui-widget-content">'+
            '<label for="add_affiliations"></label>'+
            '<div id="add_affiliation_'+affiliation_id+'" style="overflow: hidden" class="element">'+
                '<table id="affiliation_table" style="table-layout:fixed;">'+
                '<tbody>'+
                    '<tr>'+
                        '<td style="height:30px; width:65px;" align="right"><font size="2"><b>N°:</b></font></td>'+
                        '<td align="left" style="height:30px; width:700px;">'+
                            '<input type="text" name="number"; id="number'+affiliation_id+'"; value="" />'+
                        '</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td style="height:30px; width:65px;" align="right"><font size="2"><b>Affiliation:</b></font></td>'+
                        '<td align="left" style="height:30px; width:700px;">'+
                            '<input type="text" name="affiliation" id="affiliation'+affiliation_id+'" value="" style="width: 100%;" />'+
                        '</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td style="height:30px; width:65px;" align="right"><font size="2"><b>Country:</b></font></td>'+
                        '<td align="left" style="height:30px; width:700px;">'+
                        '<select id="country'+affiliation_id+'";></select>'+
                        '<img style="vertical-align:bottom; " src="/css/images/Warning.png"; id="country_warning'+affiliation_id+'"; width="20px"; height="20px"; alt="-"; />'+
                        '<span id="country_warning_message'+affiliation_id+'" style="visibility:hidden; color:red;"></span>'+
                        '</td>'+
                    '</tr>'+
                '</tbody>'+
            '</table>'+
        '</div>'+
    '</div>')
    .find('#number' + affiliation_id)
        .val(article_affiliations[i].number)
        .end()
    .find('#affiliation' + affiliation_id)
        .val(article_affiliations[i].name)
        .end()
    .appendTo('#add_affiliation')

Demo

Answer 2

Just use a backlash before the quotes \" or use single quotes to encompass your string ' " '

Remember strings can be delimited by single quotes (in which case double quoutes inside them don't need to be escaped), or double quotes (in which case single quoutes don't need to be escaped).

Additionally, you can use something like

var doubleQuoutesEscaped = originalString.split('"').join('\\"');
var singleQuoutesEscaped = originalString.split("'").join("\\'");