Menu
I have often used, and seen recommended, dom-access structures like this for adding content to pages dynamically:
loader = document.createElement('script');
loader.src = "myurl.js";
document.getElementsByTagName('head')[0].appendChild(loader);
Now, by chance, I find that this works in Google chrome:
document.head.appendChild(loader);
A little more investigation, and I find that this works, apparently cross-browser:
document.body.appendChild(loader);
So my primary question is: are there any reasons why I shouldn't attach elements to the BODY like this?
Also, do you think document.head will become more widely supported?
508
The HEAD element contains header information about the document, such as its title, keywords, description, and style sheet. HEAD is required in all documents, but its start and end tags are always optional.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
The appendChild() method appends this created element to the head of the document.
documentElement returns the Element that is the root element of the document (for example, the <html> element for HTML documents).
I can’t see any reason why it would matter in practice whether you insert your <script> elements into the <head> or the <body> element. In theory, I guess it’s nice to have the runtime DOM resemble the would-be static one.
As for document.head, it’s part of HTML5 and apparently already implemented in the latest builds of all major browsers (see http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-head).
71
document.body is part of the DOM specification, I don't see any point why not to use it. But be aware of this:
In documents with contents, returns the element, and in frameset documents, this returns the outermost element.
(from https://developer.mozilla.org/en/DOM/document.body)
document.head currently isn't defined in any DOM specification (apparently I was wrong on that, see Daniel's answer), so you should generally avoid using it.
36
I tried implementing this code and ran into a bit of trouble, so wanted to share my experience.
First I tried this:
<script>
loader = document.createElement('script');
loader.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(loader);
</script>
And in the script.js file I had code such as the following:
// This javascript tries to include a special css doc in the html header if windowsize is smaller than my normal conditions.
winWidth = document.etElementById() ? document.body.clientWidth : window.innerWidth;
if(winWidth <= 1280) { document.write('<link rel="stylesheet" type="text/css" href="style/screen_less_1280x.css">'); }
The problem is, when I did all of this, the code wouldn't work. Whereas it did work once I replaced the script loader with simply this:
<script src="script.js"></script>
That works for me, so problem solved for now, but I would like to understand the difference between those two approaches. Why did one work and not the other?
What's more is that in script.js I also have code such as:
function OpenVideo(VideoSrcURL) {
window.location.href="#OpenModal";
document.getElementsByTagName('video')[0].src=VideoSrcURL;
document.getElementsByTagName('video')[0].play();}
And that code does work fine regardless of which way I source the script in my html file.
So my window resizing script doesn't work, but the video stuff does. Therefore I'm wondering if the difference in behavior has to do with "document" object...? Maybe "document" is referencing the script.js file instead of the html file.
I don't know. Thought I should share this issue in case it applies to anyone else.
Cheers.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
