How to execute <script> code in a javascript append

Question

I'm working with a plugin that is only Javascript. I need to have it dynamically create a DIV element with an advertisement in it.

I can't figure out why this doesn't work:

$(this).append('<div class="overlay-background">Advertisement

     <script type="text-javascript">

          GA_googleFillSlot("blog_landing_right_rectangle_300x250");

     </script>'

It results in the element created with "Hello World" but it does not execute the GA-googleFillSlot function.

Do you use this code in the HTML page? if so, closing </script> could be treated as the closing tag from your outermost </script> — Vladimir Kolesnikov
– Vladimir Kolesnikov, Commented Jan 11, 2013 at 0:14

wless1 · Accepted Answer · 2013-01-11 00:13:15Z

15

appending HTML into the DOM does not cause the browser to evaluate any script tags in said appended HTML.

If you really wanted to, you could evaluate the javascript by using eval():

eval($(this).find("script").text());

answered Jan 11, 2013 at 0:13

wless1

3,5591 gold badge18 silver badges12 bronze badges

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

2 Comments

user734063 Over a year ago

This solution causes an unknown white screen error when placed with $(this).append. It produces no change when placed outside of it. I did not modify the code from how it appears above.

user734063 Over a year ago

Looks like dozens of bad requests on pubads.g.doubleclick.net. It looks like I'm appending in a loop (NextGEN gallery carousel).

temo · Accepted Answer · 2019-01-17 09:08:05Z

15

I know this is an old question but I've had a similar problem today. The solution was using createContextualFragment.

My code looks something like this:

var tagString = '<script async type="text/javascript" src="path_to_script"></script>';

var range = document.createRange();
range.selectNode(document.getElementsByTagName("BODY")[0]);
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);

answered Jan 17, 2019 at 9:08

temo

6761 gold badge9 silver badges26 bronze badges

Comments

Azder · Accepted Answer · 2013-01-11 00:53:13Z

5

This code works in my browser.

$('body').append('<script>alert("test");<' + '/' + 'script>');

so it might be that $(this) is what is actually causing your problem.

Can you replace it with 'body' and see if it works like that?

edited Jan 11, 2013 at 0:53

answered Jan 11, 2013 at 0:28

Azder

4,7287 gold badges39 silver badges57 bronze badges

2 Comments

Popnoodles Over a year ago

This works for me, if you break the </script> in the string ...</' + 'script>');

Azder Over a year ago

Thanks, I forgot about the script into script, since I usually put 'em into files.

Christophe · Accepted Answer · 2013-01-11 01:03:44Z

2

One workaround in your case could be to append a fake image with an onload event:

<img src="blank.gif" onload="GA_googleFillSlot('blog_landing_right_rectangle_300x250')" />

edited Jan 11, 2013 at 1:03

answered Jan 11, 2013 at 0:22

Christophe

28.3k29 gold badges104 silver badges145 bronze badges

Comments

memical · Accepted Answer · 2019-08-21 06:07:58Z

1

since your are in javascript, you can append and then execute the code:

$(this).append('<div class="overlay-background">Advertisement</div>');

GA_googleFillSlot("blog_landing_right_rectangle_300x250");

answered Aug 21, 2019 at 6:07

memical

2,5612 gold badges27 silver badges41 bronze badges

Comments

Vladimir Kolesnikov · Accepted Answer · 2013-01-11 00:21:24Z

0

Please try:

s = '<' + 'script type="text-javascript">' +
    'GA_googleFillSlot("blog_landing_right_rectangle_300x250");' +
    '<' + '/' + 'script>';
$(this).append(s);

UPD: alas, this won't work, please use wless1's solution instead

edited Jan 11, 2013 at 0:21

answered Jan 11, 2013 at 0:16

Vladimir Kolesnikov

1,0017 silver badges15 bronze badges

1 Comment

Christophe Over a year ago

This won't help as the script won't run anyway.

Collectives™ on Stack Overflow

How to execute <script> code in a javascript append

6 Answers 6

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related