Append script in head by jquery

Question

I want append script in head if there is tag <script> in the body, i try as following but it don't work, How can done it?

DEMO: http://jsfiddle.net/rYXJx/

JS:

var TAREA = $('body').find('textarea').length;

if(TAREA > 0){ 
    $('head').append('<script type="text/javascript" src="files/js/nicEdit.js"></script><script type="text/javascript">bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });</script>');
    };

adding elements to the `` portion of the DOM will have no effect after the page is rendered. Therefore, even though you are appending the `script` tag, nothing will happen. You'll want to use a more dynamic approach. — Jason, Dec 11 '12 at 18:26
Possible duplicate of [How to add DOM element script to head section?](http://stackoverflow.com/questions/18784920/how-to-add-dom-element-script-to-head-section) — T.Todua, Feb 14 '17 at 12:12

score 4 · Answer 1 · answered Dec 11 '12 at 18:14

4

You can use jquery getScript function:

http://api.jquery.com/jQuery.getScript/

so the correct code looks like the below:

 $.getScript('files/js/niceEdit.js');

answered Dec 11 '12 at 18:14

AlecTMH

2,615
23
26

Salman A · Answer 2 · 2012-12-11T18:32:43.320

One of the problems in your script is that the </script> inside the string literal actually breaks the outer <script> tag. You might notice these characters in your page which seem to come out of nowhere:

');};

Secondly, while it is still possible to inject a <script> tag in the head, there is no direct/easy/cross-browsr way of knowing when the script has finished loading. And you cannot use a script before it is loaded completely.

Best solution is to use jQuery.getScript() which provides a callback. Use the callback to call nicEditors.allTextAreas() function:

$(document).ready(function () {
    if ($("textarea").length > 0) {
        $.getScript("files/js/nicEdit.js", function () {
            // no need for onDomLoaded -- DOM is loaded at this point!
            nicEditors.allTextAreas();
        });
    }
});

Append script in head by jquery

2 Answers2