Home >Web Front-end >JS Tutorial >Usage of document.write() in JS (detailed tutorial)

Usage of document.write() in JS (detailed tutorial)

亚连Original: 2018-06-22 17:17:138654browse

This article mainly introduces the usage of document.write() in JS and a brief analysis of the reasons for clearing. Friends who need it can refer to it

Maybe many friends have encountered such a situation, that is When using the document.write() function to write content to a web page, the original content in the document will be cleared. This is a problem for beginners. Here is an introduction to why this happens. Of course, You will know how to avoid this situation from happening.

Let’s look at a code example first:

<!DOCTYPE html>   
<html>   
  <head>   
  <meta charset=" utf-8">      
  <title>Document</title>   
  <script type="text/javascript"> 
    window.onload=function(){
      document.write("重温 JavaScript");
    }
  </script> 
</head> 
<body> 
  <p>Hello JavaScript</p> 
</body> 
</html>

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

The window.onload event is to execute the event processing function after the document content is completely loaded. Of course, the document stream has been closed. At this time, executing the document.writ() function will automatically call the document.open() function to create the event. A new document stream is written with new content and then displayed through the browser, thus overwriting the original content. However, many friends still have this question, why in the following situation, the content of the original web page will not be overwritten. The code is as follows:

<!DOCTYPE html>   
<html>   
  <head>   
  <meta charset=" utf-8">     
  <title>Document</title>   
  <script type="text/javascript"> 
    document.write("重温 JavaScript");
  </script> 
</head> 
<body> 
  <p>Hello JavaScript</p> 
</body> 
</html>

In the above code, the original document content has not been cleared. This is because the current document stream is created by the browser, and the document.wirte() function is in it. That is, the document stream is not closed when this function is executed, and the document.open() function will not be called at this time. The new document flows, so it will not be overwritten. Some friends may ask why the following method still does not work. The code is as follows:

<!DOCTYPE html>   
<html>   
<head>   
  <meta charset=" utf-8">     
  <title>Document</title>   
  <script type="text/javascript">
    document.close(); 
    document.write("重温 JavaScript");
  </script> 
</head> 
<body> 
  <p>Hello JavaScript</p> 
</body> 
</html>

The document flow is closed using document.close() above. Why can’t the original content be overwritten? Unfortunately, the document flow It is created by the browser and cannot be closed manually without permission. The document.close() function can only close the document stream created by the document.open() function. Look at the following code example:

<!DOCTYPE html>    
<html>    
<head>    
  <meta charset=" utf-8">      
  <title>Document</title>   
  <script type="text/javascript">  
  function create(){ 
    var newWindow=window.open("","Document","_blank"); 
    newWindow.document.write("Hello JavaScript"); 
    newWindow.document.close(); 
    newWindow.document.write("覆盖后的输出"); 
  } 
  window.onload=function(){ 
    var obt=document.getElementById("bt"); 
    obt.onclick=function(){ 
      create(); 
    } 
  } 
</script> 
</head>  
<body>  
  <p id="print">Hello JavaScript</p> 
  <input type="button" id="bt" value="查看效果"/> 
</body>  
</html>

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

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

If you run document.write() directly without running document.open() first, it will be invalid and Chrome will have the following prompt:

Usage of document.write() in JS (detailed tutorial)

// asyncWrite.js
document.open();
document.write(&#39;<p>test</p>&#39;);
document.close();
<!-- asyncWrite.html -->
<!-- 运行前 -->
<body>
  <script src="asyncWrite.js" async></script>
</body>
<!-- 运行后 -->
<body>
  <p>test</p>
</body>

document. write() can also write strings containing script tags, but they need to be escaped. The content written in the script tag will run normally.

<!-- 运行前 -->
<script>
  document.write(&#39;<script>document.write("<p>test</p>");<\/script>&#39;);
</script>
<!-- 运行后 -->
<script>
  document.write(&#39;<script>document.write("<p>test</p>");<\/script>&#39;);
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>

document.write() can pass in multiple parameters.

<!-- 运行前 -->
<body>
  <script>
    document.write(&#39;<h2>multiArgument</h2>&#39;,&#39;<p>test</p>&#39;);
  </script>
</body>
<!-- 运行后 -->
<body>
  <script>
    document.write(&#39;<h2>multiArgument</h2>&#39;,&#39;<p>test</p>&#39;);
  </script>
  <h2>multiArgument</h2>
  <p>test</p>
</body>

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

How to use scope in Angular scope

How to implement dynamic loading of bar charts in angularjs

About responsiveness principles in Vue (detailed tutorial)

The above is the detailed content of Usage of document.write() in JS (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

JavaScript chrome angular 字符串 JS 作用域事件异步

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement counting sorting in JSNext article：How to implement counting sorting in JS

See more

Usage of document.write() in JS (detailed tutorial)

Related articles