JS document.write () Use introduction _javascript tips

Source: Internet
Author: User

After the manned page, the browser output stream closes automatically, and after that, any document.write () method that operates on the current page opens-a new output stream. It clears the contents of the current page, including any variables or values in the source document, so. If you want to replace the current page with script-generated HTML, you must attach the HTML content to a variable, use a document.write () method to complete the write operation, do not have to clear the document and open a new data stream, a document.write () Call to complete all operations.

One more thing about the document.write () method is that it's related to the method Document.close (). After the script has finished writing to the window (either this window or another window). The output stream must be turned off. After the last document.write () method of the delay script. You must ensure that the Document.close () method is included, and you cannot display pictures and forms without doing so. Also, any subsequent calls to the document.write () method will only append the content to the page, without clearing the existing content to write the new value.

Document.Write method

One of the most basic JavaScript commands is document.write. This command simply prints the specified text content onto the page. To print text verbatim, add single quotes to the printed text string.

Copy Code code as follows:

document.write (' Hello world! ');

The JS code above will show "Hello world!" on the page.
You can use document.write to print variables. The input variable name is not quoted, as follows:

Copy Code code as follows:

var mytext = "Hello Again";
document.write (MyText);

Note: If the variable name is quoted, the variable name will be printed (the variable value will not be printed). You can use the "+" symbol to connect variable values and text strings.

Copy Code code as follows:

var colour1 = "Purple";
var colour2 = "Pink";
document.write (' <p>colour1: ' + colour1 + ' <BR>COLOUR2: ' + colour2 + ' </p> ');

Print the results as follows:

Colour1:purple
Colour2:pink

Document.Write is also used to load JS ads

Copy Code code as follows:

document.write (' <scri ' + ' pt src= ' http://www.jb51.net/ad.js ' type= ' text/javascript ' ></s ' + ' cript> ');
document.write ("<SCRI" + "pt src= ' http://www.jb51.net/ad.js ' type= ' text/javascript ' ></s" + "cript>");
document.write ("<SCRI" + "pt src=\" Http://www.jb51.net/ad.js\ "type=\" text/javascript\ "></s" + "cript>") ;

Generally use single quotation marks (double quotes) to connect the characters, the inside is going to use a double signal (single quotes), so that can not be wrong. Of course, you can also use the escape character, but it's more troublesome to modify later.

document.write this way to load JS is asynchronous

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<title></title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<script type= "Text/javascript" >
function Load (JS) {
var s = document.createelement (' script ');
S.setattribute (' type ', ' text/javascript ');
S.setattribute (' src ', JS);
var head = document.getElementsByTagName (' head ');
Head[0].appendchild (s);

}
function Write (JS) {
document.write (' <script type= "text/javascript" src= "' +js+ '" > <\/script> ');
}

Load ("Http://www.jb51.net/js/2011/jquery-1.5.1.min.js");
Write ("Http://www.jb51.net/js/2011/jquery-1.5.1.min.js");

</script>
<script>
Alert ($);
</script>

Q: With createelement ("script") way to load, call the function will be an error, with document.write do not complain?

Answer:

For dynamically created JS references, there are different responses for different browsers   
The method of the landlord's writing to FF Opera is blocked because of the load approach ($) can be output, and for IE Chrome Safria is not blocking It's jammed, so it's going to be an error.  
The Document.Write method, which is blocked for all browsers, is synchronized so alert ($) outputs the correct result

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.