script tag inside body and behavior of appendChild

Question

I'm curious what "should" happen in the example below. Most current browsers (Firefox 5, Chrome 14, Opera 11.50) will add the iframe above the text but is it a standardised behaviour or just a common way of doing things that could change in the future?

<!doctype html>
<html>
  <head>
    <title>Will the iframe be above or below the text?</title>
  </head>
  <body>
    <script>
      var e = document.createElement("iframe");
      document.body.appendChild(e);
    </script>
    <p>some text</p>
  </body>
</html>

score 2 · Accepted Answer · answered Jul 19 '11 at 08:53

2

This is standardised behaviour.

When script runs there are yet no children in body.

answered Jul 19 '11 at 08:53

Molecular Man

22,277
3
72
89

Do you know what standard says that scripts have to be executed when encountered and execution can't be delayed until for example DOM is ready? – Marek Sapota Jul 19 '11 at 09:53
@maarons, I don't know exactly what the standard says. But my experience says that you can delay execution only by putting script right before "
" or using [domready](http://stackoverflow.com/questions/1206937/javascript-domready)
– Molecular Man Jul 19 '11 at 10:10
See . More relevantly, roughly every script on the web relies (knowingly or unknowingly) on this behaviour. – Ms2ger Jul 19 '11 at 10:32
Molecule I'm aware how it is interpreted in most browsers but I wanted to know if there is any standard behind this behaviour. @Ms2ger Still there are browsers with different behaviour - Opera Mobile would be one of them, so not every browser does that. – Marek Sapota Jul 19 '11 at 10:39
@Ms2ger Thanks for the link, found this: http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#script and then this: http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.4 It says that scripts have to be executed immediately when encountered. – Marek Sapota Jul 19 '11 at 11:24
Mm, Opera Mobile is a special case, not sure what it does. I'd suggest not relying on HTML4 for.. Well, anything really. It's known to be incomplete or incorrect in almost everything it says. – Ms2ger Aug 19 '11 at 20:12

slaphappy · Answer 2 · 2011-07-19T09:39:52.947

1

From the MDN documentation : https://developer.mozilla.org/En/AppendChild

Adds a node to the end of the list of children of a specified parent node.

As @Molecule points out, the script is executed while the tree is not yet constructed, so this node is appended on an empty list, so ends up being the first element. It's probably implementation-specific though.

edited Jul 19 '11 at 09:39

answered Jul 19 '11 at 08:51

slaphappy

6,894
3
34
59

As Molecule points out `body` doesn't have children when script is encountered so still not sure what should happen. – Marek Sapota Jul 19 '11 at 09:16
Yep, this makes sense since the tree is not built yet. I'll update. – slaphappy Jul 19 '11 at 09:37

score 0 · Answer 3 · answered Jul 19 '11 at 08:54

0

That script will be executed first and then the HTML element <p>, so that's why you get the iframe first. If you want to have the iframe at the bottom, put your script at the bottom as well. So yes, it's a standard thing.

answered Jul 19 '11 at 08:54

Arief

6,055
7
37
41

Seems to directly contradict with kbok's answer. Does the browser "have" to run the script when it encounters it (can't delay the execution until DOM is ready)? At least Opera Mobile waits and will add the `iframe` at the bottom. – Marek Sapota Jul 19 '11 at 09:13
it seems, but your script is not contained in any functions or event handlers which is waiting for a call. It's just there so the browser will directly execute it when it is found. – Arief Jul 19 '11 at 09:18
You are right, that's the point. Are browsers required to run the script when it is found (and body has no children) or can (maybe even should?) wait until body tag is closed and then execute the code? – Marek Sapota Jul 19 '11 at 09:24
yes, as soon as the browser found your "direct" script like that, it will execute it directly. That's why if you need to interact with other elements, you should place your "direct" script at the bottom, unless you're using window.onload or any other function which is called when the document is fully loaded. – Arief Jul 19 '11 at 09:32
by "direct" i mean a script not contained in a function or event handlers that it waits for a call. – Arief Jul 19 '11 at 09:32

score 0 · Answer 4 · answered Jul 19 '11 at 08:55

0

You can only manipulate DOM tree when it gets ready. Therefore, you need to write the code in window's onload event (any browser) or DOMContentLoaded event (Non-IE).

window.onload = function() {
    var e = document.createElement("iframe");
    document.body.appendChild(e);
}

answered Jul 19 '11 at 08:55

Ghostoy

2,689
19
18

That isn't true. You can manipulate an element as soon as it exists in the DOM (which is when the start tag is parsed). (Although this can cause MSIE to throw obscure error messages and blank the page) – Quentin Jul 19 '11 at 09:41

script tag inside body and behavior of appendChild

4 Answers4