2

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 find 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.
pepsi600
  • 145
  • 1
  • 2
  • 7
  • What browser are you using? In chrome for instance, you will not see the updated dom unless you click 'Inspect Element' view source will show you the original markup. – John Kalberer Aug 04 '11 at 22:34
  • Why are you using appendTo... It's kinda backwards compared to the way jquery normally goes. Try using append() instead... – Endophage Aug 04 '11 at 22:36
  • @Endophage: The first sentence in the jQuery doc for the two methods is "The .append() and .appendTo() methods perform the same task." It's personal preference beyond that. – Cᴏʀʏ Aug 04 '11 at 22:41
  • @Cory I know that... it's just pretty much every single other piece of jQuery selects the element first then does stuff with it. Plus, as appendTo is really just a wrapper for append, why not go direct. – Endophage Aug 04 '11 at 22:43
  • @Endophage: I agree, but one of them follows my thought process more closely. If I said "I want to add a script tag to the head", my brain is more okay with "add script tag to head" => `$('').appendTo('head');` than it is with "to head, add a script tag" => `$('head').append('');` Like I said, personal preference I guess :) – Cᴏʀʏ Aug 04 '11 at 22:54
  • @Cory fair enough. I work more along the lines of "get the box first, then put something in it" – Endophage Aug 05 '11 at 03:12

4 Answers4

1

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.

Moses
  • 9,033
  • 5
  • 44
  • 67
0

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 :)

frostedpops
  • 165
  • 2
  • 10
0

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>

genesis
  • 50,477
  • 20
  • 96
  • 125
0

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.

Cᴏʀʏ
  • 105,112
  • 20
  • 162
  • 194
  • 1
    did you see the CAPITALIZED "GENERATED" word in the title? I AM viewing the source code with Firebug and IE Develper Toolbar – pepsi600 Aug 04 '11 at 22:42
  • @pepsi600: How could I assume that you were using those tools, and what generated the markup you were looking at? JUST SAYIN – Cᴏʀʏ Aug 04 '11 at 22:49
  • generated...means something produced when dom ready, when page loads...so of course I'm using those tools. the Web Developer -> View Source -> View Generated Source... – pepsi600 Aug 04 '11 at 22:58
  • I would argue that the *server* generated your output and the browser rendered it. What you want to see is the source code or markup for the current state of the DOM, after its initial generation. Hopefully these other guys can point you to an answer. – Cᴏʀʏ Aug 04 '11 at 23:06