Analysis on the usage and clearing of document. write () in JS, document. write

Source: Internet
Author: User

Analysis on the usage and clearing of document. write () in JS, document. write

Many of my friends may have encountered this situation, that is, using document. when the write () function writes content to a webpage, it clears the original content in the document, which is a problem for beginners, the following describes why this situation occurs. Of course, we know how to avoid this situation.

Let's take a look at a code example:

<! DOCTYPE html> 

From the code above, we can see that the document. write () function clears the original document content. The following describes the reasons for this situation:

Window. the onload event is used to execute the event processing function after the document content is fully loaded. Of course, the Document Stream is closed and doucment is executed at this time. the writ () function automatically calls document. the open () function creates a new document stream, writes new content, and then displays it in a browser. This overwrites the original content. However, many of my friends may wonder why the content in the original webpage is not overwritten in the following case. The Code is as follows:

<! DOCTYPE html> 

In the above Code, the original document content is not cleared, because the current document flow is created by the browser and the document. the wirte () function is in the process, that is, the document Stream is not closed when the function is executed, and no document is called at this time. the open () function creates a new document stream, so it will not be overwritten. Some may ask why the following method still does not work. The Code is as follows:

<! DOCTYPE html> 

The document. close () closes the document Stream. Why can't I overwrite the original content? Unfortunately, the document Stream is created by a browser and cannot be closed manually. the close () function can only close. the Document Stream created by the open () function. See the following code example:

<! DOCTYPE html> 

The document flow created by doucment. open () can be closed by document. close (). The output of the second document. write () will overwrite the content of the first output.

When referencing external JavaScript asynchronously, you must first run document. open () to clear the document, and then run document. write (). The parameter is written at the beginning of the body content.

If you do not run document. open () first and directly run document. write (), the result is invalid and Chrome prompts the following:

// AsyncWrite. jsdocument. open (); document. write ('<p> test </p>'); document. close (); <! -- AsyncWrite.html --> <! -- Before running --> <body> <script src = "asyncWrite. js" async> </script> </body> <! -- After running --> <body> <p> test </p> </body>

Document. write () can also write strings containing script tags, but escape is required. The content in the written script tag runs normally.

<! -- Before running --> <script> document. write ('<script> document. write ("<p> test </p>"); <\/script> '); </script> <! -- After running --> <script> document. write ('<script> document. write ("<p> test </p>"); <\/script> '); </script> <script> document. write ("<p> test </p>"); </script> <p> test </p>

Document. write () can input multiple parameters.

<! -- Before running --> <body> <script> document. write ('

Summary

The above section is the document in JS. the usage of write () and the reason for clearing are analyzed. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.