6

Consider two web pages with the following in their body respectively:

<body>
<script>
document.writeln('<textarea></textarea>')
</script>
</body>

and

<body>
<script>
var t = document.createElement('textarea');
document.body.appendChild(t);
</script>
</body>

(think of them as part of something larger, where the textareas have to be generated from JavaScript and can't be hard-coded into the page). They both produce the same output, but the former is considered "bad", while the latter is considered the "right" way to do it. (Right?)

On the other hand, if you type something in the page and then either refresh it, or go somewhere else and hit Back, then in the former case, what you typed in the textarea is preserved, while in the later it is lost. (At least on Firefox.)

Is there a way to use the latter method and still have the useful feature that what the user has typed into a form is saved even if they accidentally hit refresh or come back via the Back button (at least on Firefox)?

ShreevatsaR
  • 38,402
  • 17
  • 102
  • 126
  • I just tried to add an id and name and it didn't help. I can make it disappear from both if I use insertBefore(t,document.body.firstChild) instead. – some Dec 15 '08 at 01:56
  • What is annoying is that preserving the user's work should be the *default* in any good browser, not something that only works with non-standard hacks. – ShreevatsaR Sep 27 '11 at 16:28

4 Answers4

5

I believe the document.write version actually blows away an existing content on the page. Ie, the body and script tags will no longer be there. That is why people usually use appendChild.

Keeping the text or not is very browser specific. I wouldn't bet that Firefox would not change it's behavior on that in a future version, either. I would suggest implementing an alert dialog when the user trys to navigate away from the page and there is unsaved content in edit fields. Usually you would do this with an unload event.

Chase Seibert
  • 15,703
  • 8
  • 51
  • 58
  • No, that's not true. document.write() will happily append to the existing content on the page. – ShreevatsaR Dec 15 '08 at 02:44
  • 2
    Actually, it will if you are not in the initial onload of the page. If you do it later, say when a Ajax call returns, it will erase the page. – Chase Seibert Dec 15 '08 at 02:47
  • Chase Seibert is correct that it will erase the page if it is called after the page has loaded. – some Dec 15 '08 at 03:39
  • Chase Seibert is also correct that the behavior is browser specific and I add that it also depends on the settings in the browser. Therefore you should not depend on this functionality. – some Dec 15 '08 at 03:42
  • this is about the document's open/closed/writing state and is a hangover of very early scripting tech - it has essentially been outmoded by DOM insertion and should be rarely used. – annakata Dec 15 '08 at 11:11
4

document.write() won't blow away the page content as long as it is executed inline as the page is rendered. Online advertising makes extensive use of document.write() to dynamically write adverts into the page as it loads.

If however, you executed the document.write() method at a later time in the page history (after the body is completely rendered) then as Chase says, it would blow away the existing body and display the argument to document.write().

Other than that I agree that the preserving forms behaviour is really pretty browser specific, and not something you should rely on in many cases. It's a feature there to help the user rather than something for developers to be aware of or attempt to utilize.

Andy Hume
  • 40,474
  • 10
  • 47
  • 58
0

Would it be possible for you to add a hook which you could use to target the new textarea into? eg. a <div>

<div id="addtextarea"></div>

var e = document.getElementByID('addtextarea');
e.innerHTML = '<textarea></textarea>';

Then if you needed to remember the contents you could take either the innerHTML value to include the HTML or just the text node value of the textarea to extract the text.

roborourke
  • 12,147
  • 4
  • 26
  • 37
0

Normally, I prefer to create a DOM element and insert it - especially since I can insert it exactly where I want in the page (i.e. use object.appendChild or body.appendChild). It also does not matter if the insertion is during page load or later so I can use a generalized insertion function and use it any time, during or after the full page load.

However, during the load process, if you are inserting content which includes javascript (i.e. a SCRIPT type="text/javascvript"......./SCRIPT sequence), you MUST use document.write in order to have the script execute.

  • Using document.body.appendChild(theInsertionObject) will properly add the insertion at the current point in the load process including the SCRIPT tag sequence, but it will NOT execute the javascript.

  • If you use document.write(theInsertionCode), the code will be inserted at the current point in the load process, and any embedded SCRIPT tag sequence will be executed before the remainder of the page is loaded.

DrDave
  • 718
  • 1
  • 7
  • 16