CODEWITHSUNDEEP
javascriptjquery
user1032531
user1032531

Reputation: 26341

Append and escape

How do I escape before appending? The following incorrectly appends 

'<a here."="" goes="" string"="" title="Some " href="#">Hello</a>'

in the code:

$(function(){
    var t='Some "string" goes here.';
    var jqueryObj=$('#elem');
    jqueryObj.append('<a href="#" title="'+t+'">Hello</a>');
});

REVISED CODE AFTER EDIT

var $accounts=$('#accountList');
$accounts.find('li.accountList').remove();
for (var i = 1; i < data.o.a.length; i++) {
    $accounts.append('<li class="item displayAccount">'
    +'<input type="checkbox" checked="checked" class="cb" name="accounts[]" value="'+i+'" />'
    +'<span class="name">'+data.o.a[i].name
      +((data.o.a[i].e.length)?' <a class="displayError" href="#" title="'+escape(mkList(data.o.a[i].e))+'">Error</a>':null)
    +'</span>'
    +'</li>');
}
if(data.o.a[0].c.length) {$accounts.append('<li class="item displayAccount"><input type="checkbox" disabled="disabled" value="0"><span class="name">UNASSIGNED</span></li>');}
$accounts.find('a.displayError').displayError();

Upvotes: 1

Views: 111

Answers (2)

Ohgodwhy
Ohgodwhy

Reputation: 50808

I figured I'd offer a different answer than Blender just in case you don't want to use that method.

function escapeQuotes(str){
    return str.replace(/"/g, '&quot;');
}

Will replace double quotes with &quot;.

Upvotes: 2

Blender
Blender

Reputation: 298582

jQuery has a nice syntax for creating elements safely:

$('<a>', {
    href: '#',
    title: t,
    text: 'Hello'  // Replace `text` with `html` if you need to.
}).appendTo(jqueryObj);

Your code relies a lot on strings, so I did what I could, but it could be made prettier:

for (var i = 1; i < data.o.a.length; i++) {
    var $li = $('<li class="item displayAccount"></li>');
    var $input = $('<input type="checkbox" checked="checked" class="cb" name="accounts[]" />').val(i).appendTo($li);
    var $span = $('<span class="name"></span>').appendTo($li);

    if (data.o.a[i].e.length) {
        $('<a class="displayError" href="#">Error</a>').attr('title', mkList(data.o.a[i].e)).appendTo($span);
    }

    $li.appendTo($accounts);
}

Upvotes: 6

Related Questions