This is really cool:
...blah... ... blah blah...
Under the hood it works like this:
function writeImage(url, title) { document.write(` 
${title}
`); }
And leads to:
...blah... My dog
...blah blah...
Whoa, HTML templating? It inserts the stuff directly where the function is called, and it just works? And it's been available in browsers forever? Stop the presses, I gotta rewrite all my static sites
The same approach works for reusing chunks of HTML between pages:
...page content...
when in common.js you have something like this:
function writeMetaViewport() { document.write(` `); }
Now can make a site with reusable pieces and it'll work purely on static hosting, no site generator, no server-side code, development workflow is Ctrl+S and reload. Amazingness.
But this function was known forever and all the wizards say it's dangerous... why?
Why indeed? Well, it's true that it was used badly.
I'll go ahead and propose two rules to use document.write() safely and well:
Rule 1. Only call it at the document toplevel, or in functions whose name begins with "write". Apply the same rule recursively to functions that begin with "write".
Rule 2. Never use document.write() to output ...content...
This will show just "content", because the script will think its parent is , and doesn't exist yet. The only way to fix that is to have the tag start above the script. With document.write, these things work more as expected.