Geek Answers Handbook

Document.write () vs insert DOM nodes: save form information?

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 something more where text fields should be generated from JavaScript and cannot be hardcoded on the page). They both produce the same result, but the former is considered “bad,” and the latter is considered the “right” way to do it. (Right?)

On the other hand, if you print something on the page, and then refresh it or go to another place and click "Back", then in the first case, what you typed in the text box is saved, and later it is lost. (At least on Firefox.)

Is there a way to use the latter method and still have a useful function that the user enters into the form is saved even if they accidentally get an update or return using the back button (at least in Firefox)?

+6
javascript firefox usability
source share
4 answers

I believe the version of document.write actually deletes existing content on the page. Those. body and script tags will no longer be there. This is why people usually use appendChild.

Saving text or not very browser specific. I would not argue that Firefox will not change its behavior to a future version. I suggest implementing a warning dialog box when a user tries to navigate from a page and there is unsaved content in the edit fields. Usually you do this with an unload event.

+5
source share

document.write () will not delete the contents of the page while it is inline when rendering the page. Online advertising makes extensive use of document.write () to dynamically write ads to a page as it loads.

If, however, you later executed the document.write () method in the page history (after the body is fully displayed), then, as Chase says, it will blow away the existing body and display the argument for the document. write ().

In addition, I agree that the behavior of persistent forms is indeed very browser specific, and not in many cases. This is a feature that helps the user, not what developers should know or try to use.

+4
source share

Can I add a hook that you could use to target a new text area? eg. a <div>

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

Then, if you need to remember the contents, you can take the innerHTML value to include HTML or just a text node text field value for extracting text.

0
source share

Usually, I prefer to create a DOM element and insert it, especially since I can insert it exactly where I want on the page (for example, use object.appendChild or body.appendChild). It also doesn't matter if the insert is at the time the page loads or later, so I can use the generalized insert function and use it anytime, during or after the page is fully loaded.

However, during the download process, if you insert content that includes javascript (i.e. the sequence SCRIPT type = "text / javascvript" ....... / SCRIPT), you MUST use the document. write to execute SCRIPT.

  • Using document.body.appendChild (theInsertionObject) the insert will be correctly added at the current point of the loading process, including SCRIPT, but it will NOT execute javascript.

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

0
source share

More articles:


All Articles