jQuery insertAfter not working

Hi,

I'm trying to insert some <script> tag after the jquery using:

<script id="jquery" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

$(document).ready(function() {
$( "<script src='https://www.ultratrust.com/scripts/plugins/iview/test.js'></script>" ).insertAfter( "#jquery" );
});

Open in new window


But I can see in the Google Dev tool that it's failing. What am I doing wrong?
Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?
 
Tom BeckCommented:
Don't include the closing script tag.

$(document).ready(function() {
$( "<script src='https://www.ultratrust.com/scripts/plugins/iview/test.js'>" ).insertAfter( "#jquery" );
});
0
 
leakim971PluritechnicianCommented:
Do you really need to care about where you append it?
Because if your code run, that mean jQuery is available.
http://api.jquery.com/jquery.getscript/

Check this :
<script id="jquery" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   jQuery(function($) {
        $.getScript("https://www.ultratrust.com/scripts/plugins/iview/test.js");
   });
</script>

Open in new window

0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi Tom and leakim! Thanks. Both work.

Yes, I see your point, leakim. I guess it doesn't matter since it's async js. =)
0
 
Tom BeckCommented:
Additional info for future reference.

@leakim971's solution is probably more reliable. Mine is more of a hack to trick jquery into including the script block. Normally, jquery prevents script blocks from being added to the DOM in this way because they could cause infinite loops of code execution or because they could be inserted multiple times. The difference between the two solutions is that mine will actually cause the script block to appear in the DOM whereas @leakim's will not which makes debugging difficult. A third option would be plain old javascript:
<script>
$(document).ready(function()
{
    var testJs = document.createElement("script");
    testJs.type = "text/javascript";
    testJs.src = "https://www.ultratrust.com/scripts/plugins/iview/test.js";
    $("head").append(testJs);
});
</script>
Placement of this script in the head of the page becomes important.

Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.