Well, this is not really a problem, but something really interests me.

Normally we append elements to head/body like

$("<style><\/style>").appendTo("head");
$("<div><\/div>").appendTo("body");

And when we look at the generated source code, these elements are really there. but,

$("<script><\/script>").appendTo("head");

The script element does not show up in the source code.

I looked through the source code of jQuery, and didn't fi开发者_Go百科nd anything special but pure javascript

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 ) {
            this.appendChild( elem ); // <--
        }
    });
},

If I use pure Javascript to add a script element to head, it'll show up.

So how does jQuery do that to make the script "invisible" and meanwhile "accessible"?

What's special about the script tag?

update: note before you answer

• I am not trying to solve a problem.
• I AM using Firebug/Developer tools.
• I am viewing the GENERATED source code.

---

This is not singularly related to appendTo as you might first believe. Rather, this is something that jQuery does for all of their functions that insert arbitrary HTML strings into the DOM.

To see an in-depth answer as to why this happens, read John Resig's reply to this same question here.

From what I know, jQuery actually removes the script tag after inserting it into the DOM, in order to avoid re-execution of the code.

---

Try this

<script>
$("<scri"+"pt></sc"+"ript>").appendTo("head");
</script>

you have to "escape" that from your code, otherwise browser recognizes it as end of you <script>

---

The "View Source" option in most browsers only shows you what the markup looked like when the page initially loaded. Since you're manipulating the DOM after the page has loaded, those changes aren't readily visible when you "view source."

Some web developer tools like Firebug (for Firefox) or the IE Development Toolbar (Internet Explorer) will show you the manipulated markup by allowing you to inspect elements.

---

While I see there is already an answer to this I figured I would add a note for what I found...

I was running into something similar: I was generating a table of content listing of links to each of my h1,h2,h3 elements in my website. The TOC would be across pages for the entire site and would be included on a separate page. Rather than having to manually create this I combined all pages and then used jquery to quickly create a dynamic ordered list of hyperlinks to each header.

I was going to then copy and paste that code into it's own page and make it available - The issue I was running into with firefox was that the code wasn't showing in the "view source" window, only in firebug inspect element HTML window - so how could I copy it??

I found that if I use IE's developer tools I could utilize the HTML Edit option in their developer section to copy and paste the code from their element explorer window.

There is probably a better way to create a large nested table of content list of links to each h1,h2,h3...h7 but I'm new to all this and went this route. Maybe this will help someone :)