How to set inner HTML of a span element using jQuery

Question

The following gives me the error Uncaught SyntaxError: Unexpected identifier:

$('span.xtro').html('');
$('span.xtro').html('<input type='button' class='newbutton send' value='Send request' onclick= 
                      "javascript:request('send','1','2');'>');

How can I correct this?

Answer 1

You're not escaping the single quotes:

$('span.xtro').html('<input type="button" class="newbutton send" value="Send request"'
                  + ' onclick="request(\'send\',\'1\',\'2\');">');

You can also get rid of the first $('span.xtro').html('');, you shouldn't need it.

Answer 2

It's not the best way of using jQuery... onclick attributes are not recommended. here's an alternative

//note wrapping with double quotes and using single ones inside 
var $el = $( "<input type='button' class='newbutton send' value='Send request'>" );
$el.on( 'click', function(){ request('send','1','2'); } ); 
$('span.xtro').html('').append( $el );

EDIT changed $el.bind to $el.on which is what is used nowadays