JavaScript에서는 document.open(), document.write(), document.close() 메서드를 조합하여 현재 문서의 전체 내용을 새로운 내용으로 교체할 수 있습니다. 아래 예제 코드를 직접 실행해 보면서 그 동작 방식을 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<body>
<p>클릭하면 이 내용이 교체됩니다.</p>
<button onclick = "Display()">교체</button>
<script>
function Display() {
document.open("text/html","replace");
document.write("<p>데모 텍스트입니다!</p>");
document.close();
}
</script>
</body>
</html>
코드 설명
1. document.open("text/html", "replace")
현재 문서를 다시 열어 기존의 모든 내용을 지웁니다. 두 번째 인자인 "replace"를 지정하면 브라우저 방문 기록에 새 항목을 추가하지 않고 현재 항목을 대체합니다.
2. document.write()
열린 문서 스트림에 새로운 HTML 내용을 작성합니다. 여기서는 간단한 문단 태그 하나가 작성되었습니다.
3. document.close()
문서 스트림에 대한 쓰기를 종료하고 브라우저에게 문서 로딩이 완료되었음을 알립니다.
위 예제를 실행한 후 교체 버튼을 클릭하면, 버튼과 안내 문구를 포함한 페이지의 모든 내용이 "데모 텍스트입니다!"라는 새 문단으로 바뀌는 것을 확인할 수 있습니다.
참고 사항
이 방식은 페이지 전체를 통째로 덮어쓰기 때문에 특정 요소만 변경하고 싶다면 innerHTML이나 textContent 속성을 사용하는 것이 더 안전하고 권장되는 방법입니다. 또한 최신 웹 개발 환경에서는 SPA(싱글 페이지 애플리케이션) 프레임워크를 통해 화면을 갱신하는 경우가 많습니다.