1

I have been teaching myself to program for about a month now, and I recently ran into the JavaScript function document.write(). I have heard many say that it is bad practice to use it, mostly because, when used incorrectly, it can overwrite the entire page. However, would it still be dangerous to use it if overwriting the entire page is the intended outcome? It seems as though I am the only one who is doing this, so I am not sure if it is some revolutionary concept, or if it is an unquestionably bad idea. I fear that it is most likely the latter.

If it helps at all, the main example that I am using this on is a Choose Your Own Adventure game that I am writing with my brother, in which I do not wish the previous decisions to continue being displayed to the player.

Zopffware
  • 11
  • 3
  • 4
    might be useful: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – niaher Jan 15 '14 at 04:44
  • Hiding single elements (decisions) can be done easier than by overwriting the whole page - just remove the particular elements from the DOM. – Bergi Jan 15 '14 at 04:46
  • If you're fairly new to this I would recommend looking at jQuery and how you can use that to modify the contents of a page. It'll be a steeper learning curve but much easier for you in the long run. – Nick Coad Jan 15 '14 at 04:52
  • @gnack Thanks! I'll have to look into jQuery soon. It seems as though it has been coming up more and more lately, so it is probably a very useful aspect of coding. – Zopffware Jan 15 '14 at 21:13
  • Yes, jQuery is very helpful and much more efficient for editing a page. Thanks for the help! – Zopffware Feb 06 '14 at 21:16

6 Answers6

1

One legit use of document.write is to check if your jQuery (or any other script) has loaded from a CDN, and if not fallback on the local copy of the script. Here is how the code looks like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
if (!window.jQuery) {
    document.write('<script src="/path/to/your/jquery"><\/script>');
}
</script>
niaher
  • 8,996
  • 7
  • 62
  • 84
  • I think resource (script control) is pretty much the only reason .. or perhaps injection such as for google analytics. – user2864740 Jan 15 '14 at 04:54
1

I have heard many say that it is bad practice to use it, mostly because, when used incorrectly, it can overwrite the entire page.

I'd say the significant design disadvantages are that you cannot control which part of the document is manipulated (you can only write at the current location of the script) and that it's not object-orientated (you can only write serialized html markup).

However, would it still be dangerous to use it if overwriting the entire page is the intended outcome?

No, of course not. But do you really intend that?

I do not wish the previous decisions to continue being displayed to the player.

That does not sound like a good reason to overwrite the whole page. Better remove the particular elements from the DOM.

Community
  • 1
  • 1
Bergi
  • 513,640
  • 108
  • 821
  • 1,164
0

instead of document.write you can use theelement.innerHTML

or

you could use jquery for that

go through this dynamic-page-replacing-content/

example

$('body').replaceWith(data);

or

$("body").html(newPage);
Sajad Karuthedath
  • 13,262
  • 3
  • 28
  • 49
0

You can use jquery. It might be overkill for what you are wanting to do, but it might be good to give it a look for the future.

You can put a div in your page like this

<div id="storyText"></div>

Then you can add text to the div like this

<script>$('#storyText').html('This is my new story text');</script>

You just need to include jquery in your page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
Gilberg
  • 2,228
  • 3
  • 25
  • 39
0

One reason document.write isn't preferred is because you're typically concatenating strings together by hand to make some html element combinations and these can easily have errors. For example, missing a closing tag and so on.

As an alternative, suppose for argument's sake you are using jQuery, you could do something like this with (a) less risk of making mistakes and (b) getting a result that might be more readily readable:

$('<div></div>')
.css
({
    background-color: '#fff',
    color: #000
})
.appendTo('#someEmptyDiv');

If your HTML is complicated, you could have, as another alternative, large snippets you've edited in your favourite HTML/text editor and cleanly laid out/indented and stored in external files. You could then load them into an empty element you've already created like this (also demoed using jQuery):

$.get('someComplicatedTableSnippet.html', function(snippetContent)
{
    $('#someEmptyDiv').html(snippetContent);
});
Neil Cresswell
  • 1,127
  • 8
  • 19
0

Document.write() is used if you want your browser to display that text you want in the page, in its default way. And yes, it overwrites the old text, so if you want to display only the latter text, write() is suitable. However, if you wanted to add text (or other items), you should use document.append(). So, it is not always a bad idea to use it, but in general cases, other methods are preferred.

Bogdan
  • 53
  • 3