Jquery html() to div doesn't work

Question

..I suppose because the html has script tags :-/

<script type="text/javascript">
$(document).ready(function() {
     $('.ad_slot').html('<scr'+'ipt type="text/javascript"><!-- amazon_ad_tag = "xxxxxxxx-xx"; amazon_ad_width = "160"; amazon_ad_height = "600"; //--></scr'+'ipt>');        
}); 
</script>

<div class="ad_slot"></div>

without the script tags the html displays fine. Is there any way to make this work with the tags included?

I need to generate a full js code using js for a project I'm working on.

I've also added the code to jsFiddle http://jsfiddle.net/c68wu/ although I'm not sure if scripts will show in the result window.

Answer 1

Try to escape slash in the closing script tag:

$('.ad_slot').html('...<\/script>'); 

Answer 2

You'll need to escape the forward slashes:

$('.ad_slot').html('<scr'+'ipt type="text\/javascript"><!-- amazon_ad_tag = "xxxxxxxx-xx"; amazon_ad_width = "160"; amazon_ad_height = "600"; \/\/--><\/scr'+'ipt>');

Or this:

$('.ad_slot').html('<script type="text/javascript">amazon_ad_tag = "xxxxxxxx-xx"; amazon_ad_width = "160"; amazon_ad_height = "600";</script>');

I removed the HTML comment tags and the + in script tags. Oh yeah, and I removed the escaping on the slashes...not needed.

Also, you may want to look at when your script to generate the ads is being loaded and run. I suspect it's run before and never sees this code.

Answer 3

Script tags are going to be stripped out if you attempt to add them with html. Use jQuery.getScript() instead.