The forums have permanently moved to This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.

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?

    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.

    using jQuery
    $(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.


  2. #2

    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.
    $(document).ready(function() {
        $('head').append("<script type='text/javascript'>console.log('loaded'); $('#myButton').click(function() {\
    <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 Meet the Moderators Advertise

 Link to Us


Copyright 1999 - 2012