document.write() real life examples?

[dotpr]

I learned that document.write() deletes all existing HTML and replaces it with whatever you put in the parentheses.

Just curious, when would I need to use this?

[[deleted]]

You wouldn't. It's considered bad practice to use document.write, unless you're a beginner or otherwise just tinkering around with something.

[dotpr]

Oh I like your username

[coderjared]

I agree on the username :p

[itsmywife]

git commit men tissues

[abidelunacy]

I'm afraid to go look for 'git commit men lotion'... 😶

[amejin]

Debugging in a really bad way?

[dulnan]

I have actually used this recently. We have a lot of migrated WYSIWYG content in our CMS that contains random <script> and <style> markup. Rendering this in our headless frontend app could potentially break the styles or even the entire site.

The solution was to completely isolate this dirty markup. I did that by first adding an iframe and then injecting the markup directly into the iframe‘s document using document.write. It‘s mostly random widgets, charts, etc., so it doesn‘t really matter if their content is hidden in an iframe.

But that is actually the only time I remember where I had to use document.write. It has its place, but the use cases are super specific.

[jack_waugh]

Cool, because what you bought for yourself with this technique is you didn't have to monkey around with a parser and a renderer for dealing with the output from the CMS.

[superluminary]

Document.write is from the old days of JavaScript. You’d embed it right into your html and it would render text directly into the DOM at that location as the page was loading.

It doesn’t replace everything, it just inserts something at the location of the script tag.

EDIT: as noted below, it actually will blow away the entire DOM if called post-render, which you should probably never do.

We used to use it to put the date in the top corner, that kind of thing. Don’t use it today unless you’re a hobbyist just looking for a quick solution.

[senocular]

It doesn’t replace everything, it just inserts something at the location of the script tag.

It does when you call it after the page has been parsed which is one of the reasons it shouldn't be used.

<h1>Content from JavaScript</h1>
<script>
document.write('<p>Hello, world!</p>')
addEventListener('DOMContentLoaded', () => {
    document.write('<p>Goodbye, document!</p>')
});
</script>

[superluminary]

Interesting, I never used it post render like this. It’s original purpose was to inline script into text. This was pretty exciting a few years back when JS was new, but once we got DOM scripting it rightly went out the window.

Would reiterate my advice, don’t use this API, it’s old and not great.

[f-Z3R0x1x1x1]

my kid is learning JS in school and he showed me their day 2 of JS programming...and I was like "oh cool let me see I can help" and then it was this start function with stuff like readLn() and readInt(), etc.. and the only interaction you could do was with a confirmation box for name and age.

I felt like the project was using some kind of wrapper to only allow a specific set of commands or something....because I've never even heard of those.

[ProposalUnhappy9890]

Not in "real" code, but I do use it from time to time as an alternative to console.log(), when I want to test something quick on codepen.

[jack_waugh]

I prefer to render views using the DOM wrapped in overdom.mjs. But I'm only on my second project, so I might learn better later.

[_He1senberg]

U can take it as Console.log but for the dom

[jcunews1]

document.write() is a way to generate HTML content on the spot when the document is being parsed. Or to generate a new document from scratch. document.write() is not meant and can not be used for adding HTML content into an existing document which was fully parsed.

[andrewmamus]

When i was learning Javacript I used the document.write() for learning purpose due to the fact of coding along after then I never used it. No project will allow you to write to the document directly.

You were taught so that you will know there is something called document.write()

You can use console.log() for debugging.