Insert code with script tag inside it via jQuery

Question

In my HTML file, I have an inline if statement:

<script>
if(navigator.userAgent.indexOf("Speed Insights") == -1) {
    // insert code here
}
</script>

How do I make it print code with <script> tags inside it?

What I've tried so far

I tried the following:

if(navigator.userAgent.indexOf("Speed Insights") == -1) {
    jQuery('footer').append('<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"x","uuid":"x","lid":"x","uniqueMethods":true}) })</script>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<footer></footer>

But it breaks. Likely, I am not escaping it properly...?

Are you getting an error message? And what do you mean by "print code"? — , Aug 06 '21 at 08:02
@ChrisG Yes, see my updated question where you can run the code snippet. EDIT: With print code, I mean, to add the code into the page. — Henrik Petterson, Aug 06 '21 at 08:06
Not sure what's causing the unterminated literal error; I don't see anything wrong with the text. Anyway, you can try this instead: https://jsfiddle.net/kbxazmeq/ — , Aug 06 '21 at 08:16
@ChrisG That works. Please consider posting it as an answer. Thanks! — Henrik Petterson, Aug 06 '21 at 08:25
Glad it works, but not going to post an answer. This is most likely a typo type issue, and inserting a script using jQuery is 100% a dupe. — , Aug 06 '21 at 08:25
Your script is not working because jquery doesn't let you do `$("` literal into two. — freedomn-m, Aug 06 '21 at 08:32
Does this answer your question? [How to append in JavaScript?](https://stackoverflow.com/questions/9413737/how-to-append-script-script-in-javascript) — freedomn-m, Aug 06 '21 at 08:32
Specifically [this answer](https://stackoverflow.com/a/9413772/2181514) `' — freedomn-m, Aug 06 '21 at 08:34

score 0 · Answer 1 · answered Aug 06 '21 at 09:08

I just want to replicate @Chris G's answer in comments so it becomes more readable for people having similar problem. Source of the code: link

if (navigator.userAgent.indexOf("Speed Insights") == -1) {
  const $chimp = jQuery("<script>");
  $chimp.attr('data-dojo-config', "usePlainJson: true, isDebug: false");
  $chimp.on('load', function() {
    window.dojoRequire(["mojo/signup-forms/Loader"], function(L) {
      L.start({
        "baseUrl": "x",
        "uuid": "x",
        "lid": "x",
        "uniqueMethods": true
      })
    })
  });
  jQuery('footer').append($chimp);
  $chimp.attr('src', "//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<footer>Footer</footer>

Siva Chandran · Answer 2 · 2021-08-06T09:16:04.573

-1

Try this code

<script>

    if(navigator.userAgent.indexOf("Speed Insights") == -1) {
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('src', '//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js');
        scriptElement.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');
        document.body.appendChild( scriptElement );
    
        window.dojoRequire(['mojo/signup-forms/Loader'], function (L) {
            L.start({ baseUrl: 'x', uuid: 'x', lid: 'x', uniqueMethods: true });
        });
    }

</script>

edited Aug 06 '21 at 09:16

answered Aug 06 '21 at 08:04

Siva Chandran

89
7

1

Can you please update your answer with code example of how it would work in my particular case? – Henrik Petterson Aug 06 '21 at 08:09
I've updated the code as per your usecase. – Siva Chandran Aug 06 '21 at 09:17

score -1 · Answer 3 · edited Aug 06 '21 at 08:08

-1

Use this code.

var head = document.getElementsByTagName('footer')[0];
var js = document.createElement("script");

js.type = "text/javascript";

if(navigator.userAgent.indexOf("Speed Insights") == -1) {
js.src = "/downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false";
js.content = "window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"x","uuid":"x","lid":"x","uniqueMethods":true}) })"
}

footer.appendChild(js);

edited Aug 06 '21 at 08:08

Henrik Petterson

6,862
20
71
155

answered Aug 06 '21 at 08:06

Vincent12171

1

2

You cannot use a single script element to run both an external and inline script. – Aug 06 '21 at 08:12

Insert code with script tag inside it via jQuery

What I've tried so far

3 Answers3