document.write vs appendChild

Question

Is there a difference in load \ execution time between the following two ways of adding a script to a page ?

<script>
document.write('<script src=someScript.js></script>');
</script>

vs this:

<script>
var s=document.createElement('script');
s.src='someScript.js';
document.body.appendChild(s);
</script>

assuming both are added at the same location on the page (before the closing body tag).

Any info is appreciated!

Edit: Thanks all for the comments and answers. I'm actually looking for specific information on differences in load time and\or execution (if there are any?). Also, I can place both while the DOM is still being parsed. Thanks again for any pointers on this!!

Coriss

Using document.write() is typically frowned upon ;-) – Shanley

document.write() work with DOM load, but appendChild() will work with event, you can use appendChild(s) with javascript events e.g click, load. – Effable

firefox does not allow to perform document.write as insecure operation – Psychoneurosis

Answer 1

I came across this while researching for the same. After some testing, I conclude that, yes, there is a major difference between those two methods. On modern browsers, this is not so much on the loading or execution time but the sequence in which the scripts are being evaluated. For example, if you have the following:

someScript.js

console.log('2');

index1.htm

<script>
console.log('1');
 var script = document.createElement('script');
 script.src = 'someScript.js';
 document.write(script.outerHTML);
</script>
<script>
console.log('3');
</script>

index2.htm

<script>
console.log('1');
 var script = document.createElement('script');
 script.src = 'someScript.js';
 document.body.appendChild(script);
</script>
<script>
console.log('3');
</script>

Running index1.htm on your console will give you the sequence "1, 2, 3". Running index2.html will give you the sequence "1, 3, 2" instead. If there are external scripts being requested, these will load ahead of the dynamically requested someScript for both methods.

Important thing to note is the order of execution. As Jack noted in the comment, using document.write is frowned upon. This is true if your scripts are not located at the end of the html document as it will block the rendering of your webpage. I am not so sure, if this is still the case if your scripts are at the bottom though.

Nevertheless, you can still use a callback function to enforce order in the execution of javascript.

Eyestrain

I actually ended up coming in to the same conclusion in my own tests. Thanks for posting your findings!! – Coriss

I disagree that it is frowned upon. Document.write is only frowned upon if it it used in a manner that blocks the DOM. If used correctly, it's a perfectly viable method of controlling script execution order. Of course, this only works when following other best practices, namely loaded your scripts at the bottom of the page. – Trixi

Answer 2

document.write() writes in the document where it is executed.
Whereas appendChild appends the element to the specified element.

Vauban

document.write() does not overwrite your document. – Over

document.write() appends to the position it is executed at – Samora