Usage of document.write() in JS (detailed tutorial)
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:
// asyncWrite.js document.open(); document.write('<p>test</p>'); 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('<script>document.write("<p>test</p>");<\/script>');
</script>
<!-- 运行后 -->
<script>
document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>document.write() can pass in multiple parameters.
<!-- 运行前 -->
<body>
<script>
document.write('<h2 id="multiArgument">multiArgument</h2>','<p>test</p>');
</script>
</body>
<!-- 运行后 -->
<body>
<script>
document.write('<h2 id="multiArgument">multiArgument</h2>','<p>test</p>');
</script>
<h2 id="multiArgument">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.
Related articles:
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to recover cleared browsing history
Feb 18, 2024 pm 10:05 PM
How to restore web page history after it has been cleared Date: June 10, 2022 Introduction: When we use computers or mobile phone browsers daily, we often use the browser's history to find web pages we have visited before. However, sometimes we may accidentally clear our browser history, causing us to be unable to retrieve a specific web page. In this article, I will tell you some ways to recover cleared web history. Method 1: Use the browser recovery function. Most common browsers provide the function of restoring history, such as Google
How to clear content on Weibo_Tutorial on clearing content on Weibo
Mar 30, 2024 pm 05:51 PM
1. First open the Weibo APP and click My in the lower right corner. 2. Then enter the personal center interface and click Weibo in the upper left corner. 3. Finally, enter and delete Weibo messages one by one.
How to deal with desktop loss after KB4532693 update?
Dec 27, 2023 am 11:41 AM
When we use computers with the win10 operating system, sometimes if a problem occurs, we will definitely choose to update the system patch. So for the situation where the desktop clears after the KB4532693 update is installed, the editor thinks that the new patch may not be stable enough, so there is still a probability that problems will occur when using it. We can try to uninstall the patch first. Let’s take a look at the detailed steps to see how the editor did it~ What to do if the desktop is cleared after the KB4532693 update? 1. Microsoft will start pushing the Windows 10 KB4532693 security patch on February 11. 2. The system version number will be updated to 18363.657, but recently some netizens discovered , 3. Installing this update will cause new system problems, Wind
How to clear the draft box on Weibo_Tutorial on clearing the draft box on Weibo
Mar 30, 2024 pm 08:31 PM
1. Open the Sina Weibo app and enter [Me] in the lower right corner. 2. After entering, you can see the draft box at the top of the page, and then click to open it. 3. After entering, long press the draft work you want to delete, and the two options of [Delete Draft] and [Clear Draft Box] will appear. 4. Click [Clear Draft Box].
How to clear the questions that have been done in the Chalk App How to clear the questions that have been done in the Chalk App
Mar 12, 2024 pm 01:43 PM
How to clear the questions that have been done in the Chalk App? The Chalk App is a software that allows users to do questions directly. This software also has many video lessons and handouts. Users can choose to download the videos and handouts they need when there is wifi, so that we can You can watch it without consuming data while waiting for the bus or on the bus. Some users have done some questions on this, and then want to clear the question records. The editor below has compiled methods for clearing the question records for your reference. How to clear the completed questions in the Chalk App? The Chalk App and the web page do not provide the function of clearing the completed questions. If you want to re-do the completed questions, you need to register a new account to use it. In Chalk APP, all
How to recover files if you accidentally emptied the Recycle Bin
Feb 21, 2024 pm 06:45 PM
How to recover files after accidentally emptying the Recycle Bin When we use files on the computer, we often encounter some unexpected situations, such as accidentally emptying the Recycle Bin, causing important files to be deleted. At this time, many people may feel panicked and wonder how to recover deleted files. But in fact, with the help of the right methods and tools, we still have a chance to recover these important files. This article will introduce you to some methods and tools to help you recover files in the Recycle Bin that you accidentally emptied. First of all, what we need to understand is that
Find the player with the fewest number of zeros after emptying a binary string (by removing non-empty substrings)
Sep 16, 2023 am 10:21 AM
In this article, we will discuss an interesting problem related to the field of string manipulation and game theory: "Empty a binary string by removing non-empty substrings and find the player with the fewest remaining zeros". This question explores the concept of using binary strings for competitive gaming. Our goal is to find the player with the fewest 0 remaining at the end of the game. We will discuss this issue, provide a C++ code implementation, and explain the concept through an example. Understanding the problem statement Two players are given a binary string and they take turns playing the game. On each turn, the player removes non-empty substrings that contain at least one "1". The game ends when the string becomes empty or there is no "1" in the string. Players unable to take action lose the game. The task is to find the final 0
How to clear deleted email records in QQ mailbox
Mar 20, 2024 pm 09:26 PM
As an important tool for our daily sending and receiving emails, QQ mailbox provides us with a convenient way of communication. In daily use, we usually delete read or spam emails, but simple deletion cannot completely remove them, so in order to save space and keep the mailbox tidy, it is a good habit to empty the deleted emails. So users who want to completely delete these emails should follow this article to learn more! How to clear deleted emails in QQ mailbox 1. First, click to open QQ mailbox, scroll down the page and find the deleted option. 2. Then click to enter the page and select the edit button in the upper right corner. 3. Then select Clear from the options that pop up at the bottom. 4. Finally confirm and click Clear 1
