Why do I need to use document.write instead of DOM manipulation methods?

Question

I'm trying a new ad service, and as far as I know they don't provide a functional interface to loading their ads. We want to display different ad sizes depending on the user's screen size, and this service requires you to load a different .js URL for each size.

I originally tried writing:

<script type="text/javascript"><!--
    var dochead = document.getElementsByTagName('head')[0];
    var newscript = document.createElement('script');
    newscript.type = "text/javascript";
    newscript.src = '//ads-by.madadsmedia.com/tags/22430/9194/async/' + (screen.width >= 1360 ? '160' : '120') + 'x600.js';
    dochead.appendChild(newscript);
    //-->
</script>

but I just got a blank page. I looked in Chrome developer tools and it seemed to be loading their script properly. Their script loads other scripts from Google, and they showed up in the DOM as well. But there was no ad image.

When I changed my script to:

<script language="JavaScript" type="text/javascript">
var prot = document.location.protocol;
var adwidth = (screen.width >= 1360 ? '160' : '120');
document.write('<script language="JavaScript" type="text/javascript"'); document.write('src="'+prot+'//ads-by.madadsmedia.com/tags/22430/9194/async/'+adwidth+'x600.js">'); document.write('<\/scr' + 'ipt>');
</script>

it worked properly. I don't generally like using document.write, I wonder why it's needed in this case? The ad service's script makes extensive use of document.write, is that why?

Ediva

Sorry for answering so late, but I think it is of noticing you have a Javascript Syntax Error on the 1st line. Instead of <!--, you should have //<!--. – Ayr

We're no longer using that ad service, so this is moot. Thanks anyway. – Ediva

However, I've looked at our current ad pages, and their scripts are similar. They have <script><!--//<![CDATA[...//]]>--></script> – Ediva

Answer 1

Because they are using document.write():

http://ads-by.madadsmedia.com/tags/22430/9194/async/160x600.js:

if (!window.ActiveXObject){
  document.write("<div style=\"text-align: center; margin: 0px auto; width:160px; height:600px; position:relative;\">");
// etc.

If document.write() isn't run in-line on and actively "open" document, it'll clobber what's there. So, running their script post-load overwrites your content with theirs.

Jara

Answer 2

if the document is loading its ready state is interactive but the body element has not been completely parsed. You can not add a child to an element which has not been loaded. It results in an error and the script stops.

dochead.appendChild(newscript);

The quick fix is to run your function using a body.onload event. Moving the script to the bottom of the page may work but I would not consider that reliable in a world which includes Internet Explorer and badly behaving browsers.

Supervene

The script is executing. I can set a breakpoint in it, and it stops at the breakpoint. – Ediva

You need to look at what the script that is being called is doing as well. Maybe the reason they are doing a document.write is because the next script in line is doing a document.write. A non-answer but alternative solution to your question is to create an <object src="myad.html" width= ...> and place the scripts which use document write in myad.html. document.write works during parsing and appendChild after parsing, document.write can not add material after the document is loaded. – Supervene

Answer 3

if their script uses document.write it is possible that it would cause the page to go blank, as it overwrites the stream.

document.write clears page

You could override document.write as a fix: (but I wouldn't.....)

How to deal with document.write in a script that's added after a page has loaded?

Endocardial