Browsers bug on document.write

Question

I have multiple widgets like this

var c2409 = "<div class="products">PRODUCT1 PRODUCT2 PRODUCT4 ...</div>";
document.write(c2409)

And I call this

<script src="website/getjswidget.aspx?cid=xxxx-xxxx-xxx-xxxx"></script>

Now looks like sometime after I clear the cache, this replace everything in my html and I get a blank page only with this div from my widget. Any other solutions to replace document.write?

Answer 1

This is by design.

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.

Source

If you want to append data to your webpage, use this:

document.body.innerHTML += 'your HTML code to add'

Edit: If you want to show this in a particular element, you can do something like this:

<!-- HTML element -->
<div id="myData"></div>

<!- Javascript code -->
document.getElementById('myData').innerHTML += 'your HTML'

Edit 2 (After some searching): You can get the current script element by using document.currentScript and then perhaps use Node.insertBefore to create a div right before that script tag, to put your data in.

Edit 3: Apparently document.currentScript doesn't work in IE. But this answer may help.