Document.Write – Don’t Use!!!

I like the javascript web comment document.write. It places what I want, where I want it on the website. This is great for menus and other things that you’re repeating on multiple pages of your site. And Chrome just killed it! Well, they killed it in version 54 and we’re now on 77. I just now noticed it not working.

So, why didn’t I notice it until now? Well, Chrome didn’t really kill it, they just deprecated it to the point where it sometimes doesn’t work. And they’ll eventually deprecate it to the point that it won’t work at all. Why, because it can be slow.

I had most of mine sped up. Rather than having several document.write statements in a row, I created a string and then did document.write on that string. v=’xxx’;v+=’yyy’; etc. document.write(v). I even liked document.write so much that I created a shortcut function for it in my Expressive Websites Javascript Library – need to deprecate that too I guess. Or at least note that it may no longer work.

However, Chrome still thought that they were too slow. So I’m having to fix my websites., FantasticStoriesForYou .com , WeCanReverseClimateChange .com , and That’s only 4 websites, but several webpages per.

I replaced document.write with innerHTML. To do this, id an element before the <script> statement. Chrome tells me that I’m supposed to make my scripts async …. But for what I’m doing not sure that applies. Anyway this works, for now. Make sure that you don’t do something like <p><script></script></p> – place those outer paragraph tags inside the script – as part of the innerHTML. Then place a <div id=…></div> before the script.

innerHTML is elementid.innerHTML=v. So if your id is xyz, then xyz.innerHTML=v. My code still didn’t work when I forgot to close the element before the script – it doesn’t exist until you close it. Also, if I had a document.write within a script, I had to rework that, making sure that the element was created before the innerHTML statement. And innerhtml doesn’t work – the HTML must be uppercase.

When passing the id to a function, I had to use document.getElementById(x).innerHTML=v. And if I uppercased ID it didn’t work – javascript is case sensitive. Of course I knew that, but I can’t remember what somebody else decided was uppercase and what wasn’t.

Bottom line – if you’re using one of my websites and it doesn’t work – try again tomorrow. This is going to take a little bit of time.

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments