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?

Have a look at the syntax highlighting, and you should be able to see the problem... — Rob W
– Rob W, Commented Apr 8, 2012 at 14:46

Rob W · Accepted Answer · 2012-04-08 14:49:45Z

11

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.

edited Apr 8, 2012 at 14:49

Rob W

351k87 gold badges811 silver badges683 bronze badges

answered Apr 8, 2012 at 14:46

BenOfTheNorth

2,8621 gold badge23 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Gary Over a year ago

+1 Although I'd recommend he/she create the element and attach it instead.

Sam Over a year ago

+1 But, why not open and close with double quotes and leave the original single quotes alone?

Beraki Over a year ago

Hanks alot bro @BenGriffiths you are the best

Gary Over a year ago

@Rob W: $20 says that since his question is answered he will never see this page again.

Gary Over a year ago

@jmort253 - My response was to the comment asking the OP to accept an answer.

|

gotofritz · Accepted Answer · 2017-03-06 16:23:22Z

8

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

edited Mar 6, 2017 at 16:23

answered Apr 8, 2012 at 15:00

gotofritz

3,3912 gold badges33 silver badges49 bronze badges

1 Comment

jamesmortensen Over a year ago

This is the cleaner solution. The quotes within quotes within quotes, to the point where you have to escape them, can get pretty complicated after awhile. +1

Collectives™ on Stack Overflow

How to set inner HTML of a span element using jQuery

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related