The difference between document.write and document.writeln in js-JS Tutorial-php.cn

The difference between document.write and document.writeln in js

亚连

Release： 2018-05-31 10:29:16

Original

2825 people have browsed it

This article mainly introduces the difference between document.write and document.writeln in js. Friends in need can refer to it

Both are methods of JavaScript output to the client. Comparison shows that the writing method is different. The difference is the abbreviation of ln--line. In other words, the writeln method outputs in lines, which is equivalent to adding a newline character

after the ?winte? output. Note: The document.write method can be used in two ways. : Use real-time scripts to create web page content during web page loading and use delayed scripts to create the content of this window or a new window. This method requires a string parameter, which is the HTML content written to the window or frame. The string Parameters can be variables or expressions whose values are strings. The written content often contains HTML tags.

Remember that after loading the web page, the browser output stream will automatically close. After any of these, any changes to the current The document.write() method of the web page will open a new output stream, which will clear the current web page output content (including any variables and values in the source document). Therefore, if you want to replace the current web page with the HTML content generated by the script , you must concatenate the HTML content and assign it to a variable. Here, use document.write() to complete the write operation. There is no need to clear the document and open a new data stream, a document.write() call is OK.

Regarding the document.write() method, we also need to explain its related method document.close(). After the script finishes writing content to the window (whether it is this window or another window), the output stream must be closed. At the end of the script After a document.write() method, you must ensure that there is a document.close() method. If you do not do this, images and forms will not be displayed. Also, any subsequent document.write() calls will only append the content to the page, and not Existing content will not be cleared, new values will be written

Specific steps:

1. Open a blank window.
window.open()

2. Use the write method to write code to the blank window.

document.write("Line1")
document.write("Line1")

3. Use the writeln method to write code to the blank window.

document.writeln("Line1")
document.writeln("Line2")

4． Full code example:

<script> 
with(window.open()){ 
document.write("Line1") 
document.write("Line1") 
document.writeln("Line1") 
document.writeln("Line2") 
} 
</script>

Copy after login

Note: The difference between the two methods is only visible when looking at the source code.
Special Tip: Add the above code to the web page, and then view the source code of the pop-up window, you will see:

Line1Line1Line1
Line2

The page effect and source code are as follows picture.

Special Note

Generally speaking, under normal circumstances, there is no difference in the output effect of the two methods on the page (unless it is output to pre or xmp element).

2. document.write() writes HTML to the specified location

When the page is initialized, it can be written correctly in the select box
But when it is called, it is written in the control Besides, I wonder if document.write() can change innerHTML or outerHTML to dynamically write HTML? And how to deal with the written HTML for display?

is as follows:

<html>
<head>
</head>
<script type="text/javascript">
function creatOption(){
for(i=0;i<5;i++)
document.write("<option  value=&#39;"+i+"&#39;>"+i+"</option>");
}
function openWrite(){
var win=window.open(); 
win.document.write("Line1");
win.document.write("Line1");
win.document.write("<input type=&#39;text&#39; value=&#39;1234567890&#39; />");
win.document.writeln("Line1");
win.document.writeln("Line2");
}
</script>
<body>
<select id="myselect" name="myselect">
<script  language="javascript">
  creatOption();
</script>
</select>
<input type="button" value="按钮" onclick="openWrite()"/>
</body>
</html>

Copy after login

Regarding the retained format, test it:

<script> 
document.write("<pre class="brush:php;toolbar:false">我在pre中不会换行!")
document.write("我在pre中不会换行!")
document.writeln("我在pre中会换行!")
document.writeln("我在pre中会换行!")
document.writeln("我在pre中会换行!

Copy after login

The difference between Write and Writeln

Write cannot wrap, but Writeln can wrap.

How to check the line wrapping effect of Writeln

You cannot see the line wrapping effect of writeln on the web page. It is displayed as a space by the browser.
The effect cannot be seen in the HTML file and JSP source file. Readers can add pre-formatted tags to the tags to view the effect

Script House editor added: You can view it through f12 in chrome

<script>
   document.write("<pre class="brush:php;toolbar:false">write");
   document.writeln("writln");
   document.write("write

");

Copy after login

In addition to the above, readers can also use the open method to reopen a window to view

<script> 
with(window.open()){ 
document.write("write") 
document.writeln("writeln") 
document.writeln("write") 
}
</script>

Copy after login

Then view the web page source file in the pop-up window to see the effect. After testing by the author, there is no view source file column in the pop-up window in chrome 56.0.2924.3. At this time, you can "check" and see the effect in the Element column. There is a view source file column in IE11 and Firefox50.0. column.

Script House Supplement:

<html> 
  <head> 
    <title>document.write</title>     
    <script> 
      document.write("hello"); 
      document.writeln("world");//document.writeln()不能换行，只是多了空格，相当于\r\n 
      document.writeln("world"); 
      document.write("<br/>"); 
      document.write("hu"); 
      //输出一个按钮，注意多个引号的嵌套问题 
      document.write("<input type=&#39;button&#39; value=&#39;我是按钮&#39;/>"); 
    </script> 
  </head> 
  <body> 
  </body> 
</html>

Copy after login

View through F12 of chrome

Note:

Note: document.writeln (like document.write) does not work in XHTML documents

write and writeln do not work in XHTML files, HTML is the syntax XHTML is relatively loose, which explains why there are no line breaks in html. Click me to view.

Definition of html, xhtml and xml:

　1. HTML is Hyper Text Markup Language, which is the earliest language for writing web pages. However, due to its early date, the specifications are not very good, with mixed case and non-standard coding;
　2. xhtml is an upgraded version of html (Extensible Hyper Text Markup Language), which standardizes html and makes the coding more rigorous and pure. It is also a transitional language from html to xml;
　3. xml instant extensible markup language (Extensible Markup Language) is a cross-platform language with more freedom in coding and the freedom to create tags.
　4. Web page coding develops from the process of html>>xhtml>>xml.

The difference between html, xhtml and xml:

1. Compared with html, xhtml documents have good and complete layout, which is reflected in two aspects: a. Elements must have end tags; b. , elements must be nested;
2. For html elements and attributes, xhtml must be lowercase, because xml is strictly case-sensitive,

and

are different tags;
3. The attribute value of xhtml must be in quotation marks;
4. xhtml does not support attribute minimization. What is attribute minimization?
Correct: unminimized attributes
　
Incorrect: minimized attributes
　
5. In xhtml, the name attribute is deprecated and will be deleted in future versions.

Let’s talk about why web page coding has developed from html>>xhtml>>xml?

It is said that the early webpage is written in HTML language, but it has three serious shortcomings:

1. The coding is not standardized, the structure is confusing and bloated, and it requires an intelligent terminal to display it well. ;
2. The performance and structure are confusing, which is not conducive to development and maintenance;
3. More network devices cannot be used, such as mobile phones, PDAs, etc.;
Therefore, HTML needs to be developed to solve this problem, so W3C XHTML was also formulated, which is a bridge from HTML to XML. And xml is the trend of web development.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Solve the problem of vue route change page data not refreshing

Solve the problem of vue single page using keep- The problem that the alive page returns without refreshing

vue multi-entry file construction vue multi-page construction example explanation

The above is the detailed content of The difference between document.write and document.writeln in js. For more information, please follow other related articles on the PHP Chinese website!