In an JavaScript If/else statement, how can I render a script tag based on the condition?

Question

Let’s say based on a condition I want a certain JavaScript tag to be added to the HTML.

script1 = '<div id="render_div"></div><script src="script1"></script>';

script2 = '<div id="render_div"></div><script src="script1"></script>';


var someCondition = 0;

if (someCondition == 0) {
    //only render script1;
} else {
    //only render script2
}

I am thinking of using document.write(script1); but don't think that's the best way.

Below is the condition:

Using an API I am grabbing how many images a user folder has. So if the count is 0 then I want to render script 2. If the count is more than 1 then I want to render script 1.

what kind of condition? wouldn't it be more feasible to do this server side? — omma2289, Aug 20 '14 at 23:59
Why have two scripts, and not a single easy-to-import script and call the right exposed function depending on your condition? — Volune, Aug 21 '14 at 00:10
@Volune I am not sure. I am still learning so just my thought process but please share what you think is the best way. Thanks. — KPO, Aug 21 '14 at 00:11
I'm not sure I can make a clear point in an answer, I'll try: Make a function for `condition==0` and a function for `condition!=0`. Load both function in the same script of the condition test. Call the right function in the `if..else..`. That's all, only one script, simple, no problem. Trying to load one script or another sounds like early optimization to me, which is a bad practice (unless you master web development) — Volune, Aug 21 '14 at 00:17

Alexander O'Mara · Accepted Answer · 2014-08-21T00:31:01.853

2

If you want to avoid using document.write or can't because it is asynchronous, you could dynamically create a script tag and add it to the DOM.

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
if (someCondition == 0) {
    script.src = 'script1';
} else {
    script.src = 'script2';
}
head.appendChild(script);

Update for updated requirements:

If the variables need to be HTML, you could use jQuery to append them to the DOM. jQuery will parse the HTML and load the scripts automatically.

if (someCondition == 0) {
    $("SOME_SELECTOR").append(script1);
} else {
    $("SOME_SELECTOR").append(script1);
}

edited Aug 21 '14 at 00:31

answered Aug 21 '14 at 00:06

Alexander O'Mara

58,688
18
163
171

Thanks. But looks like I might run into an issue with the tags inside the script1 and script2 variable though. – KPO Aug 21 '14 at 00:08
1

@KPO: I've added a jQuery based solution for adding your HTML string to the DOM and loading the script. – Alexander O'Mara Aug 21 '14 at 00:31
Thanks. Checking now. – KPO Aug 21 '14 at 00:35
Thanks! This worked. I ended up using document.write. – KPO Aug 21 '14 at 00:40

score 1 · Answer 2 · answered Aug 21 '14 at 00:03

Answer to Question Asked

This is a nice way to do it (taken from HTML5 boilerplate)

<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>

Alternative

YepNope (http://yepnopejs.com/) offers a nice syntax for conditional loading. Usually used in combination with Modernizr (http://modernizr.com/) for conditional polyfills.

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

If Jquery is being used, I suggest using $.getScript (as suggested by this post here). Otherwise Alexander O'Mara's suggestion seems reasonable.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 21 '14 at 00:11

Josh

36
2

In an JavaScript If/else statement, how can I render a script tag based on the condition?

3 Answers3

Answer to Question Asked

Alternative