JS에서 document.write() 사용법(자세한 튜토리얼)
이 글은 주로 JS에서의 document.write() 사용법과 클리어 이유에 대한 간략한 분석을 소개합니다. 필요한 친구들은 참고하면 됩니다.
아마도 많은 친구들이 document를 사용하면서 이런 상황에 직면했을 것입니다. write() 함수가 웹 페이지에 내용을 쓸 때 문서의 원본 내용을 지웁니다. 이는 초보자에게 발생하는 문제이며, 이를 방지하는 방법을 소개하겠습니다.
먼저 코드 예제를 살펴보겠습니다.
<!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>위 코드에서 document.write() 함수가 원본 문서 내용을 지우는 것을 볼 수 있습니다. 이 상황의 이유를 소개하겠습니다.
window.onload 이벤트 문서 내용이 완전히 로드된 후 이벤트 처리 함수를 실행합니다. 물론 이때 document.writ() 함수를 실행하면 자동으로 document.open() 함수가 호출되어 생성됩니다. 새 문서 스트림을 작성하고 새 콘텐츠를 작성한 다음 브라우저를 통해 표시하면 원본 콘텐츠를 덮어씁니다. 하지만 많은 친구들은 여전히 다음과 같은 상황에서 원본 웹 페이지의 내용을 덮어쓰지 않는 이유에 대해 질문합니다. 코드는 다음과 같습니다.
<!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>위 코드에서는 원본 문서 내용이 지워지지 않았습니다. 이는 현재 문서 스트림이 브라우저에 의해 생성되고 document.wirte() 함수가 그 안에 있기 때문입니다. 즉, 이 함수가 실행될 때 문서 스트림이 닫히지 않습니다. 지금은 새 문서 스트림을 생성하기 위해 호출되므로 다루지 않습니다. 어떤 친구들은 왜 다음 방법이 작동하지 않느냐고 물을 수 있습니다. 코드는 다음과 같습니다:
<!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>위의 document.close()를 사용하여 문서 흐름을 닫았는데, 안타깝게도 문서를 덮어쓸 수 없는 이유는 무엇입니까? 흐름은 허가 없이 수동으로 생성되고 닫히므로 document.close() 함수는 document.open() 함수에 의해 생성된 문서 스트림만 닫을 수 있습니다. 다음 코드 예제를 보세요:
<!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>document.open()에 의해 생성된 문서 스트림은 document.close()에 의해 닫힐 수 있으며, 두 번째 document.write()에 의해 출력된 콘텐츠는 첫 번째 document.write()에 의해 출력된 콘텐츠를 덮어씁니다. .
외부 JavaScript를 비동기적으로 참조하는 경우 먼저 document.open()을 실행하여 문서를 지운 다음 document.write()를 실행해야 합니다. 매개변수는 본문 내용 시작 부분에 작성됩니다.
document.open()을 먼저 실행하지 않고 document.write()를 직접 실행하면 유효하지 않으며 Chrome에 다음 메시지가 표시됩니다.
// 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()는 다음을 포함하는 문자열을 쓸 수도 있습니다. script 태그를 삭제해야 합니다. 스크립트 태그에 작성된 내용은 정상적으로 실행됩니다.
<!-- 运行前 -->
<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()는 여러 매개변수를 전달할 수 있습니다.
<!-- 运行前 -->
<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>위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Angularjs에서 막대 차트의 동적 로딩을 구현하는 방법
위 내용은 JS에서 document.write() 사용법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7698
15
1640
14
1393
52
1287
25
1229
29
지워진 검색 기록을 복구하는 방법
Feb 18, 2024 pm 10:05 PM
삭제된 웹 페이지 기록을 복원하는 방법 날짜: 2022년 6월 10일 소개: 매일 컴퓨터나 휴대폰 브라우저를 사용할 때, 우리는 이전에 방문한 웹 페이지를 찾기 위해 브라우저 기록을 사용하는 경우가 많습니다. 그러나 때로는 실수로 브라우저 기록을 지워서 특정 웹페이지를 검색하지 못하는 경우도 있습니다. 이 기사에서는 지워진 웹 기록을 복구하는 몇 가지 방법을 알려 드리겠습니다. 방법 1: 브라우저 복구 기능을 사용하세요. 대부분의 일반적인 브라우저는 Google과 같은 기록 복원 기능을 제공합니다.
Weibo에서 콘텐츠를 삭제하는 방법_Weibo에서 콘텐츠 삭제에 대한 튜토리얼
Mar 30, 2024 pm 05:51 PM
1. 먼저 웨이보 앱을 열고 오른쪽 하단에 있는 내를 클릭하세요. 2. 그런 다음 개인 센터 인터페이스에 들어가서 왼쪽 상단에 있는 Weibo를 클릭하세요. 3. 마지막으로 웨이보 메시지를 하나씩 입력하고 삭제합니다.
KB4532693 업데이트 후 데스크탑 손실을 처리하는 방법은 무엇입니까?
Dec 27, 2023 am 11:41 AM
win10 운영 체제가 설치된 컴퓨터를 사용할 때 가끔 문제가 발생하면 반드시 시스템 패치 업데이트를 선택하게 됩니다. 그래서 KB4532693 업데이트를 설치한 후 바탕화면이 지워지는 상황에 대해 편집자는 새 패치가 충분히 안정적이지 않을 수 있다고 생각하므로 사용 시 문제가 발생할 확률은 여전히 존재합니다. 먼저 패치를 제거해 볼 수 있습니다. 편집자는 어떻게 했는지 자세한 과정을 살펴보겠습니다~ KB4532693 업데이트 이후 바탕화면이 지워지면 어떻게 해야 할까요? 1. 마이크로소프트는 2월 11일부터 윈도우 10 KB4532693 보안 패치를 푸시하기 시작합니다. 2. 시스템 버전 번호는 18363.657로 업데이트될 예정이나 최근 일부 네티즌들이 발견, 3. 이 업데이트를 설치하면 새로운 시스템 문제가 발생하게 됩니다.
Weibo에서 초안 상자를 지우는 방법_Weibo에서 초안 상자 지우기에 대한 튜토리얼
Mar 30, 2024 pm 08:31 PM
1. 시나 웨이보 앱을 열고 오른쪽 하단에 [나]를 입력하세요. 2. 입력 후 페이지 상단에 초안 상자가 보이는데, 클릭해서 열어주세요. 3. 입력 후 삭제하려는 초안 작품을 길게 누르면 [초안 삭제]와 [초안 상자 지우기] 두 가지 옵션이 나타납니다. 4. [초안함 지우기]를 클릭하세요.
초크앱에서 작성한 문제를 지우는 방법 초크앱에서 작성한 문제를 지우는 방법
Mar 12, 2024 pm 01:43 PM
Chalk 앱에서 작성한 질문을 어떻게 지우나요? Chalk 앱은 사용자가 직접 질문을 할 수 있는 소프트웨어입니다. 이 소프트웨어에는 또한 많은 비디오 강의와 유인물이 있습니다. 사용자는 Wi-Fi가 있을 때 필요한 비디오와 유인물을 다운로드하여 소비하지 않고도 시청할 수 있습니다. 버스를 기다리는 동안이나 버스에서 데이터를 수집합니다. 일부 사용자는 이에 대해 몇 가지 질문을 한 후 질문 기록을 지우고 싶어합니다. 아래 편집기는 참고용으로 질문 기록을 지우는 방법을 정리했습니다. 초크 앱에서 완성된 문제를 지우려면 어떻게 해야 하나요? 초크 앱과 웹 페이지에서는 완성된 문제를 다시 풀기 위한 기능을 제공하지 않습니다. . 초크 앱에서는 모든
실수로 휴지통을 비운 경우 파일을 복구하는 방법
Feb 21, 2024 pm 06:45 PM
실수로 휴지통을 비운 후 파일을 복구하는 방법 컴퓨터에서 파일을 사용하다 보면 실수로 휴지통을 비워 중요한 파일이 삭제되는 등 예기치 못한 상황이 자주 발생합니다. 이때 많은 사람들이 당황하고 삭제된 파일을 복구하는 방법에 대해 궁금해할 수 있습니다. 그러나 실제로 올바른 방법과 도구를 사용하면 이러한 중요한 파일을 복구할 수 있는 기회가 여전히 남아 있습니다. 이 문서에서는 실수로 비운 휴지통의 파일을 복구하는 데 도움이 되는 몇 가지 방법과 도구를 소개합니다. 우선, 우리가 이해해야 할 한 가지는
(비어있지 않은 하위 문자열을 제거하여) 바이너리 문자열을 비운 후 0의 개수가 가장 적은 플레이어를 찾습니다.
Sep 16, 2023 am 10:21 AM
이 기사에서는 문자열 조작 및 게임 이론 분야와 관련된 흥미로운 문제인 "비어 있지 않은 부분 문자열을 제거하여 이진 문자열을 비우고 남은 0이 가장 적은 플레이어를 찾습니다"라는 흥미로운 문제에 대해 논의할 것입니다. 이 질문은 경쟁 게임에 바이너리 문자열을 사용하는 개념을 탐구합니다. 우리의 목표는 게임이 끝났을 때 0이 가장 적게 남은 플레이어를 찾는 것입니다. 우리는 이 문제를 논의하고, C++ 코드 구현을 제공하고, 예제를 통해 개념을 설명할 것입니다. 문제 설명 이해하기 두 명의 플레이어에게 이진 문자열이 주어지고 그들은 차례로 게임을 합니다. 매 턴마다 플레이어는 "1"이 하나 이상 포함된 비어 있지 않은 하위 문자열을 제거합니다. 문자열이 비어 있거나 문자열에 "1"이 없으면 게임이 종료됩니다. 행동을 취할 수 없는 플레이어는 게임에서 패배합니다. 임무는 마지막 0을 찾는 것입니다.
QQ 메일함에서 삭제된 이메일 기록을 지우는 방법
Mar 20, 2024 pm 09:26 PM
매일 이메일을 보내고 받는 데 중요한 도구인 QQ 사서함은 편리한 의사소통 방법을 제공합니다. 일상생활에서 우리는 일반적으로 읽은 이메일이나 스팸메일을 삭제하지만 단순 삭제로는 완전히 제거할 수 없으므로 공간을 절약하고 메일함을 깔끔하게 유지하기 위해 삭제된 이메일을 비우는 습관을 들이는 것이 좋습니다. 따라서 이러한 이메일을 완전히 삭제하려는 사용자는 이 문서를 따라 자세히 알아보세요! QQ 사서함에서 삭제된 이메일을 지우는 방법 1. 먼저 QQ 사서함을 클릭하여 열고 페이지를 아래로 스크롤하여 삭제된 옵션을 찾습니다. 2. 그런 다음 클릭하여 페이지에 들어가고 오른쪽 상단에 있는 편집 버튼을 선택합니다. 3. 그런 다음 하단에 나타나는 옵션에서 지우기를 선택합니다. 4. 마지막으로 확인하고 Clear 1을 클릭합니다.
