Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 3 of 3

Thread: How to insert a script tag into head element using jQuery?

  1. #1

    How to insert a script tag into head element using jQuery?

    Hi,
    Is it possible to insert a script tag to a head element of an html file using jQuery? I tried a couple of methods, but none worked. I don't see the script but the script is getting executed.
    But I'm able to do it using plane javascript and dom.

    Eg:
    using jQuery
    Code:
    $(document).ready(function() {
        $('<script type="text/javascript">alert("hi - appendTo");</script>').appendTo('head');
        $('head').append('<script type="text/javascript">alert("hello append");</script>');
    });
    // gets the alert, but I don't see the appended script tags in elements (chrome dev tools)
    Other tags like div shows up.

    Thanks.

  2. #2
    http://api.jquery.com/append/#comment-67912032

    Quote Originally Posted by Karl Swedberg
    All of jQuery's insertion methods use a domManip function internally to clean/process elements before and after they are inserted into the DOM. One of the things the domManip function does is pull out any script elements about to be inserted and run them through an "evalScript routine" rather than inject them with the rest of the DOM fragment. It inserts the scripts separately, evaluates them, and then removes them from the DOM.
    So, it's part of jQuery's design that script elements are removed from the DOM when you add them using jQuery. I personally don't care if there is a convoluted way to avoid this while still "using jQuery" in some arbitrary technical sense to insert the tag, so I think that guy's explanation should sufficiently resolve the matter.

  3. #3
    Okay. Thanks.
    I tried with an example. It works like intended.
    eg:
    Code:
    //js
    $(document).ready(function() {
        $('head').append("<script type='text/javascript'>console.log('loaded'); $('#myButton').click(function() {\
                         alert('click!');});</script>");
    });
    
    //html 
    ....
    <button id="myButton">Click</button>
    They should have documented it. But what advantage does removing the scripts have over keeping it in the DOM. I could find a couple of disadvantages like it makes debugging very difficult. One of the main reason for using jQuery is that it makes DOM manipulation a breeze. So if I'm using jQuery, then falling back to normal js and DOM api to do some set of functions (like inserting a script tag) doesn't make me feel good about the code style; because I'm kind of mixing both. Anyway I'll stick with using both. At least I'd like to know the reason behind such a design decision. Any thoughts on that?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012